React:使用危险的SetInnerHTML插入时脚本标签不起作用 [英] React: Script tag not working when inserted using dangerouslySetInnerHTML
问题描述
我正在尝试使用 React 中的 risklySetInnerHTML 属性设置从我的服务器发送的 html 以显示在 div 内.我在里面也有脚本标签，并使用在该 html 中定义的函数.我在 JSFiddle here 中举例说明了错误.
I'm trying to set html sent from my server to show inside a div using dangerouslySetInnerHTML property in React. I also have script tag inside it and use functions defined in same inside that html. I have made example of error in JSFiddle here.
这是测试代码:
var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';
var Hello = React.createClass({
displayName: 'Hello',
render: function() {
return (<div dangerouslySetInnerHTML={{__html: x}} />);
}
});
我检查过，脚本标签已添加到 DOM，但无法调用该脚本标签中定义的函数.如果这不是正确的方法，是否还有其他方法可以注入脚本标记的内容.
I checked and the script tag is added to DOM, but cannot call the functions defined within that script tag. If this is not the correct way is there any other way by which I can inject the script tag's content.
推荐答案
这是完成它的一些肮脏的方法，关于这里发生的事情的一些解释，您通过正则表达式提取脚本内容，并仅使用 react 呈现 html，然后在安装组件后，脚本标记中的内容在全局范围内运行.
Here's a bit of a dirty way of getting it done , A bit of an explanation as to whats happening here , you extract the script contents via a regex , and only render html using react , then after the component is mounted the content in script tag is run on a global scope.
var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';
var extractscript=/<script>(.+)</script>/gi.exec(x);
x=x.replace(extractscript[0],"");
var Hello = React.createClass({
displayName: 'Hello',
componentDidMount: function() {
// this runs the contents in script tag on a window/global scope
window.eval(extractscript[1]);
},
render: function() {
return (<div dangerouslySetInnerHTML={{__html: x}} />);
}
});
ReactDOM.render(
React.createElement(Hello),
document.getElementById('container')
);
这篇关于React:使用危险的SetInnerHTML插入时脚本标签不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
