如何在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行：意外的return标记”

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

---

更新

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

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

这就是它的外观（在上面的示例中）：

这就是我使用<SomeReactClass somefunction={myFunction}>得到的结果：

- Christian

---

你为什么要首先添加一个<script>元素呢？（这可能不会引发错误，但这是一个奇怪的情况） - Felix Kling

我错了，顺带一提，错误是正确的。 - Felix Kling

你可能想要查看这个答案。https://dev59.com/cFUM5IYBdhLWcg3wWvLF 这对我很有效。这应该是一条评论，但我没有足够的声望... - nliu71

Answer 1

我知道这已经过时了，但我最近偶然发现了这个问题并找到了最佳解决方案（我正在使用它来进行浏览器兼容性处理，但它适用于任何代码）：

我知道这篇文章有点老了，但最近我偶然间发现了它，这里提供了我所找到的最佳解决方案（我正在将它用于浏览器的polyfill，但它同样适用于任何代码）：

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

- Bamieh

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

但如果您不解释您真正想在这里实现什么，很难确定。

- Felix Kling

---

修复SomeReactClass的代码，期望输入一个函数而不是一个字符串。 - Felix Kling

看起来基础插件期望一个字符串属性，该属性对应于全局范围内的一个函数 https://github.com/wenzhixin/bootstrap-table/blob/master/src/bootstrap-table.js#L136。所以如果 OP 想使用一个 HTML 属性来初始化 Bootstrap 组件，他需要将它附加到 window 上。否则，他可以手动初始化表格。 - Nick Tomlin

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中，您需要在render函数中执行以下操作：

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

最重要的是，你不仅需要插值函数，还需要执行它。

- PhilVarg

---

这没有太多意义。这将尝试将一个函数呈现为<div>的子元素。 - Felix Kling

更新了。如果您能提供 SomeReactClass 示例代码，那对我们会很有帮助，因为看起来您没有正确执行它。我建议阅读我发布的链接中关于如何正确使用JSX的文档。 - PhilVarg

Answer 4

你应该尝试这个：

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

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

- Visnja