React：使用dangerouslySetInnerHTML插入时脚本标记不起作用 [英] React: Script tag not working when inserted using dangerouslySetInnerHTML
问题描述
我试图设置从我的服务器发送的html，以在React中使用dangerouslySetInnerHTML属性显示内部div。我也有脚本标签里面，并使用相同的HTML内定义的函数。我在JSFiddle 此处中提供了错误示例。
这是测试代码：
var x ='< html>< scr'+'ipt> alert this.is.sparta）; function pClicked（）{console.log（p is clicked）;}< / scr'+'ipt>< body>< p onClick =pClicked（）> ;你好< / p>< /体>< / HTML>';
var Hello = React.createClass（{
displayName：'Hello'，
render：function（）{
return（< div dangerouslySetInnerHTML = {{__ html ：x}} />）;
}
}）;
我检查并将脚本标记添加到DOM，但无法调用在该脚本标记内定义的函数。如果这不是正确的方式，我可以通过其他方式注入脚本标记的内容。
这里有一点一个肮脏的方法来完成它，
一些关于这里发生了什么的解释，你通过一个正则表达式提取脚本内容，并且只使用react来呈现html，然后在组件被装入脚本之后标记在全局范围内运行。
var x ='< html>< scr'+'ipt> alert this.is.sparta）; function pClicked（）{console.log（p is clicked）;}< / scr'+'ipt>< body>< p onClick =pClicked（）> ;你好< / p>< /体>< / HTML>';
var extractedcript = /< script>（。+）< \ / script> /gi.exec（x）;
x = x.replace（extractedcript [0]，）;
var Hello = React.createClass（{
displayName：'Hello'，
componentDidMount：function（）{
//这会在脚本标记中运行内容一个窗口/全局作用域
window.eval（extractedcript [1]）;
}，
render：function（）{
return（< div dangerouslySetInnerHTML = {{__html：x}} />）;
}
}）;
ReactDOM.render（
React.createElement（Hello），
document.getElementById（'container'）
）;
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.
This is test code:
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}} />);
}
});
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.
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：使用dangerouslySetInnerHTML插入时脚本标记不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
