javascript - React JS如何让dangerouslySetInnerHTML中的脚本执行

Question

如何让 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')。有人可以帮忙吗？谢谢

Answer 1

由于 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