Javascript 如何使用 ReactJS 添加 <script> 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31276926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add <script> tag using ReactJS?
提问by Christian
I need to declare a javascript function as described below:
我需要声明一个 javascript 函数，如下所述：
render: function() {
return (
<div>
<SomeReactClass somefunction="myFunction">
<script>
function myFunction(index, row) {
return index; <<<< error in this line
}
</script>
</div>
);
}
But, it does not compile: "Parse Error: Line 113: Unexpected token return"
但是，它不会编译：“解析错误：第 113 行：意外的令牌返回”
How can I add tag using ReactJS?
如何使用 ReactJS 添加标签？
UPDATE
更新
I'm trying to use bootstrap-table detail view. The function is passed as parameter to the grid and it is used to render the row's detail. Also, see the example's source codefor a better understanding.
我正在尝试使用bootstrap-table detail view。该函数作为参数传递给网格，用于呈现行的详细信息。另外，请参阅示例的源代码以更好地理解。
When I try the way you're saying, it compiles, but does not work at all:
当我按照你说的方式尝试时，它可以编译，但根本不起作用：
This is how it looks like (in example above):
这是它的样子（在上面的例子中）：
This is what I'm getting with <SomeReactClass somefunction={myFunction}>
这就是我得到的 <SomeReactClass somefunction={myFunction}>
回答by Bamieh
I know this is old, but i stumbled upon this recently and here is the best solution i found (i'm using it for browser polyfills, but it works for any code):
我知道这是旧的，但我最近偶然发现了这个，这是我找到的最佳解决方案（我将它用于浏览器 polyfill，但它适用于任何代码）：
render: function() {
return (
<div>
<SomeReactClass somefunction="myFunction">
<script
dangerouslySetInnerHTML={{ __html:
`function myFunction(index, row) {return index;}`
}}
/>
</div>
);
}
回答by Felix Kling
Inside JSX, {...}denotes a JavaScript expression. return index;on its own is not a valid expression.
在 JSX 中，{...}表示一个 JavaScript 表达式。return index;本身不是一个有效的表达方式。
You have to explicitly create a string so that the {...}are not interpreted by JSX. Template literals may be the easiest solution:
您必须显式地创建一个字符串，以便{...}JSX 不会对其进行解释。模板文字可能是最简单的解决方案：
<script>{`
function myFunction(index, row) {
return index;
}
`}</script>
However, I have a hard time coming up with a reason why one would want to create a <script>dynamically.
但是，我很难想出一个为什么要<script>动态创建一个的原因。
What you should probably do is pass the function directly to the component:
您可能应该做的是将函数直接传递给组件：
function myFunction(index, row) {
return index;
}
var Component = React.createElement({
render: function() {
return (
<div>
<SomeReactClass somefunction={myFunction} />
</div>
);
}
});
But it's hard to tell without you explaining what you are really trying to achieve here.
但是，如果不解释您在这里真正想要实现的目标，就很难说清楚。
回答by PhilVarg
i think youre just looking for interpolation of your JS
我想你只是在寻找你的 JS 的插值
function myFunction(index, row) {
return index;
}
render: function() {
return (
<div>
<SomeReactClass somefunction={myFunction}>
</div>
);
}
to interpolate javascript in jsx utilize curly braces {}
https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions
在 jsx 中插入 javascript 使用花括号{}
https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions
per your edit:
again, you need to be using the braces to interpolate your function. so inside of SomeReactClassyou need to be doing something like this in the render function:
根据您的编辑：
同样，您需要使用大括号来插入您的函数。所以SomeReactClass你需要在渲染函数中做这样的事情：
<div>{this.props.myFunction(index, row)}</div>
most notably, you need to not only interpolate the function, by you also need to be executing it.
最值得注意的是，您不仅需要插入函数，还需要执行它。
