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

Question

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

＆＃xA;＆＃xA;

  render：function（）{＆＃xA; return（＆＃xA;＆lt; div＆gt;＆＃xA;＆lt; SomeReactClass somefunction =“myFunction”＆gt;＆＃xA;＆lt; script＆gt;＆＃xA; function myFunction（index，row）{＆＃xA; return index ;＆lt;＆lt;＆lt;＆lt;此行中的错误＆＃xA;}＆＃xA;＆lt; / script＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;）;＆＃xA;}＆＃xA ;  

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

如何使用ReactJS添加标签？

＆＃xA;＆＃xA;

---

＆＃xA;＆＃xA;

UPDATE

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃ xA;

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

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

这就是我用＆lt; SomeReactClass somefunction = {myFunction}＆gt;

＆＃xA;＆＃xA;

＆＃XA;

Answer 1

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

{{1}}

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