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

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

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

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