编程语言
首页 > 编程语言> > javascript – React：使用dangerouslySetInnerHTML插入时脚本标记不起作用

javascript – React：使用dangerouslySetInnerHTML插入时脚本标记不起作用

作者：互联网

我正在尝试使用React中的dangerouslySetInnerHTML属性设置从我的服务器发送的html以显示div内部.我里面也有脚本标签,并使用html中定义的函数.我在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,但无法调用该脚本标记中定义的函数.如果这不是正确的方法,我可以通过其他任何方式注入脚本标记的内容.

解决方法:

这是完成它的一种肮脏方式,
关于这里发生什么的一些解释,你通过正则表达式提取脚本内容,并且只使用react渲染html,然后在安装组件之后,脚本标记中的内容在全局范围内运行.

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

标签：html,script-tag,javascript,reactjs
来源： https://codeday.me/bug/20190923/1813760.html