如何获得内部脚本 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')执行 有人可以帮忙吗?谢谢
console.log('hello world')
您不能这样做,因为为了安全起见,脚本标签会自动删除。
使用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()但运行更快的示例。
new Function()()
eval()
我用过,componentDidMount所以我确定脚本在显示视图后执行。Will和Did挂载之间的另一个区别是,Will挂载在通用(同构)应用程序的服务器和客户端上执行,而Did挂载将仅在通用应用程序的客户端上执行。
componentDidMount