小编典典

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

reactjs

如何获得内部脚本 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')执行 有人可以帮忙吗?谢谢


阅读 387

收藏
2020-07-22

共1个答案

小编典典

您不能这样做,因为为了安全起见,脚本标签会自动删除。

使用javascript的最佳方法是单独获取字符串,然后从 componentWillMountcomponentDidMount
执行(或评估)它 __

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挂载将仅在通用应用程序的客户端上执行。

2020-07-22