如何使用 ReactJS 添加 <script> 标签？

IT技术 javascript reactjs
2021-03-27 19:22:06

我需要声明一个 javascript 函数，如下所述：

render: function() {
  return (
          <div>
            <SomeReactClass somefunction="myFunction">
            <script>
              function myFunction(index, row) {
                return index;                       <<<< error in this line 
              }
            </script>
          </div>
          );
}

但是，它不会编译：“解析错误：第 113 行：意外的令牌返回”

如何使用 ReactJS 添加标签？

更新

我正在尝试使用bootstrap-table detail view。该函数作为参数传递给网格，用于呈现行的详细信息。另外，请参阅示例的源代码以更好地理解。

当我按照你说的方式尝试时，它可以编译，但根本不起作用：

这是它的样子（在上面的例子中）：

在此处输入图片说明

这就是我得到的 <SomeReactClass somefunction={myFunction}>

在此处输入图片说明

4个回答

我知道这是旧的，但我最近偶然发现了这个，这是我找到的最佳解决方案（我将它用于浏览器 polyfill，但它适用于任何代码）：

render: function() {
  return (
     <div>
        <SomeReactClass somefunction="myFunction">
        <script
          dangerouslySetInnerHTML={{ __html:
            `function myFunction(index, row) {return index;}`
          }}
        />
     </div>
  );
}

在 JSX 中，{...}表示一个 JavaScript 表达式。return index;本身不是一个有效的表达方式。

你必须显式地创建一个字符串，这样{...}JSX 就不会解释它。模板文字可能是最简单的解决方案：

<script>{`
    function myFunction(index, row) {
        return index;
    }
`}</script>

但是，我很难想出一个为什么要<script>动态创建一个的原因。

您可能应该做的是将函数直接传递给组件：

function myFunction(index, row) {
    return index;
}

var Component = React.createElement({
  render: function() {
    return (
      <div>
        <SomeReactClass somefunction={myFunction} />
      </div>
    );
  }
});

但是，如果不解释您在这里真正想要实现的目标，就很难说清楚。

看起来底层插件需要一个字符串属性，该属性对应于全局范围github.com/wenzhixin/bootstrap-table/blob/master/src/...上的函数。因此，如果 OP 想要使用 html 属性来初始化引导程序组件，他需要将其附加到窗口。否则他可以手动初始化表。
2021-05-22 19:22:06
修复SomeReactClass期望一个函数，而不是一个字符串。
2021-06-08 19:22:06

我想你只是在寻找你的 JS 的插值

function myFunction(index, row) {
  return index;    
}
render: function() {
  return (
    <div>
      <SomeReactClass somefunction={myFunction}>
    </div>
  );
}

在 jsx 中插入 javascript 使用花括号{}
https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

根据您的编辑：
同样，您需要使用大括号来插入您的函数。所以SomeReactClass你需要在渲染函数中做这样的事情： 

<div>{this.props.myFunction(index, row)}</div>

最值得注意的是，您不仅需要插入函数，还需要执行它。

更新。查看您示例的代码对我们很有帮助，SomeReactClass因为它看起来不像您正确执行它。我还建议从我发布的链接中阅读有关如何正确使用 jsx 的文档
2021-05-24 19:22:06
这没有多大意义。这将尝试将函数呈现为 a 的子级<div>。
2021-06-05 19:22:06

你应该试试这个：

function myFunction(index, row) {
  return index;    
}

render: function() {
 return (
      <div>
        <script
            dangerouslySetInnerHTML={{ 
              __html:myFunction() 
        
            }}
        />
      </div>
      );
}
其它你可能感兴趣的问题
上一篇升级到 Visual Studio 2019 16.10.0 后，React 应用程序“无法加载资源：net::ERR_HTTP2_PROTOCOL_ERROR” 下一篇React-Router：如何在路由转换之前等待异步操作