React JS如何在危险的SetInnerHTML中执行脚本答案

【问题标题】：React JS how to get script inside dangerouslySetInnerHTML executedReact JS如何在危险的SetInnerHTML中执行脚本
【发布时间】：2016-10-14 16:29:19
【问题描述】：

如何让 dangerouslySetInnerHTML 中的脚本被执行？

class Page extends Component {

  render() {
    return (
      <script
        dangerouslySetInnerHTML={{ __html: `
          console.log('hello world');
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            event: 'viewCart'
          });
        ` }}
      />
    );
  }
}

我无法执行 console.log('hello world')。有人可以帮忙吗？谢谢

【问题讨论】：

React: Script tag not working when inserted using dangerouslySetInnerHTML的可能重复

标签： javascript reactjs google-tag-manager

【解决方案1】：

您不能这样做，因为出于安全考虑，会自动删除脚本标签。

使用 javascript 的最佳方法是单独获取字符串并从 componentWillMount 或 componentDidMount

执行（或评估）它

class Page extends Component {

  componentDidMount() {
    const jsCode = `
      console.log('hello world');
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'viewCart'
      })
    `;
    new Function(jsCode)();
  }

  // you can do something else here
  render() {
    return (
      <noscript />
    );
  }
}

您显然可以使用任何字符串。我想你可能是从服务器加载它。

在上面的示例中，我使用了new Function()()，它与eval() 非常相似，但运行速度更快。

我使用了componentDidMount，所以我确定脚本会在视图显示后执行。 Will 和 Did mount 之间的另一个区别是 Will mount 在通用（同构）应用程序的服务器端和客户端上都执行，而 Did mount 只会在通用应用程序的客户端上执行。

【讨论】：

两者都执行的是Will mount，而不是Did mount
@MichaelRasoahaingo 感谢您了解这一点。固定。
希望有一个参考链接指向删除脚本标签的反应文档。我看到脚本是写的，但似乎完全被忽略了。
这不是 React 的问题，而是 innerHTML 应该如何工作这是因为出于安全原因，不会执行通过 innerHTML 注入的脚本标签：developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
@pherris 查看下面的答案

【解决方案2】：

由于react-dom 创建它们的方式，脚本元素不会被执行。

当ReactDOM.createElement 接收到'script' 类型时，它会使用.innerHTML，而不是像您预期的那样使用document.createElement。

var div = document.createElement('div');
div.innerHTML = '<script></script>';

var element = div.removeChild(div.firstChild);

以这种方式创建脚本会将该元素上的“parser-inserted”标志设置为 true。这个标志告诉浏览器它不应该执行。

https://github.com/facebook/react/blob/c2a2d8a539bf02e40c43d36adc2826e228f30955/packages/react-dom/src/client/ReactDOMComponent.js#L406

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_considerations

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0

【讨论】：