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

Question

我需要声明一个javascript函数,如下所述:

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

但是,它没有编译:"解析错误:第113行:意外的令牌返回"

如何使用ReactJS添加标签？

---

UPDATE

我正在尝试使用bootstrap-table详细信息视图.该函数作为参数传递给网格,它用于渲染行的细节.另外,请参阅示例的源代码以便更好地理解.

当我尝试你说的方式时,它会编译,但根本不起作用:

这是它的样子(在上面的例子中):

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

Answer 1

我知道这是旧的,但我最近偶然发现了这里,这是我找到的最佳解决方案(我将它用于浏览器polyfills,但它适用于任何代码):

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

Answer 2

在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>
    );
  }
});

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