React JS如何危险地执行SetInnerHTML中的脚本

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挂载之间的另一个区别是，Will挂载在通用（同构）应用程序的服务器和客户端上执行，而Did挂载将仅在通用应用程序的客户端上执行。