防止React危险地调用SetInnerHTML客户端

Question

I use dangerouslySetInnerHTML for rendering a JS script tag in one of my components for loading DFP ad units. My page is first rendered on the server then the same code loads also on the client.

The problem is that the DFP code uses document.write to inject a script and as soon as my client side code loads it cancels this because most probably dangerouslySetInnerHTML gets re-called and replaces the script first rendered on the server.

Any idea of how to go around this?

Answer 1

If you don't want the contents of the component being changed after the initial render, define shouldComponentUpdate in your component and set it to always return false . That way you can prevent the component from ever updating beyond the initial render.

Answer 2

The problem was that there were some rendering differences between server and client so React was patching parts of the DOM (or maybe all of it) thus breaking the ad's iframe.

This was happing only in production so the warnings were not showing up.

More precisely the difference was caused by moment js rendering some dates relative to the machine's time zone which was different from server to client.