如何在危险的SetInnerHTML 中获取脚本执行？
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')处决。有人可以帮忙吗？谢谢
由于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://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_thinkations
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0
您不能这样做，因为出于安全考虑会自动删除脚本标记。
使用 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 只会在通用应用程序的客户端上执行。