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

Question

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

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

但是，它没有编译：“Parse Error: Line 113: Unexpected token return”

如何使用 ReactJS 添加标签？

---

更新

我正在尝试使用bootstrap-table detail view。该函数作为参数传递给网格，用于呈现行的详细信息。另外，请参阅example's source code 以获得更好的理解。

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

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

这就是我通过 <SomeReactClass somefunction={myFunction}> 得到的结果

Answer 1

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

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

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

Answer 3

我认为你只是在寻找你的 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>

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

Answer 4

你应该试试这个：

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

render: function() {
 return (
      <div>
        <script
            dangerouslySetInnerHTML={{ 
              __html:myFunction() 
        
            }}
        />
      </div>
      );
}