阻止React调用dangerouslySetInnerHTML客户端

Prevent React from calling dangerouslySetInnerHTML client side

本文关键字：客户端 dangerouslySetInnerHTML 调用 React 阻止更新时间：2023-09-26

我使用dangerouslySetInnerHTML在我的一个组件中呈现JS脚本标记，用于加载DFP广告单元。我的页面首先在服务器上呈现，然后同样的代码也加载到客户端上。

问题是，DFP代码使用document.write来注入脚本，一旦我的客户端代码加载，它就会取消这一操作，因为很可能dangerouslySetInnerHTML会被重新调用并替换最初在服务器上呈现的脚本。

你知道怎么绕过这个吗？

如果不希望在初始渲染后更改组件的内容，请在组件中定义shouldComponentUpdate，并将其设置为始终返回false。这样，就可以防止组件在初始渲染之后更新。

问题是服务器和客户端之间存在一些渲染差异，因此React正在修补DOM的部分（或全部），从而破坏了广告的iframe。

这只是在生产中发生的，所以警告没有出现。

更确切地说，这种差异是由于moment js呈现了一些相对于机器时区的日期，而服务器和客户端的时区不同。