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

您不能因为安全性而自动删除脚本标记。

使用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只会在通用应用程序的客户端执行。

Answer 2

由于react-dom创建脚本元素的方式，脚本元素无法执行。

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

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

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

以这种方式创建脚本会将该元素上的“插入分析器”标志设置为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

React JS如何在dangerouslySetInnerHTML中执行脚本

2 个答案: