在我的JS组件中,我当前渲染了非js版本的标记,以便与旧浏览器兼容。然后客户端将其重新渲染为js-on标记。
这会导致下面的错误,您可以看到noscript版本触发此错误。
警告:React尝试在容器中重用标记,但校验和无效。这通常意味着您正在使用服务器呈现,并且在服务器上生成的标记不是客户端所期望的。 React注入了新的标记以补偿哪些有效但你已经失去了服务器渲染的许多好处。相反,弄清楚为什么生成的标记在客户端或服务器上是不同的:
(client) <div class="shortlist ... (server) <noscript data-reacti ...
有没有办法解决这个问题,客户端在保持对noscript浏览器的支持的同时获得最快的体验?
答案 0 :(得分:1)
我的解决方案是将<noscript>
替换为<div id="noscript" ref="noscript">
,并componentDidMount
致电this.refs.noscript.style.display = 'none';
。
要尽快隐藏noscript div,我还在服务器端呈现标记的占位符后立即将<script>try{document.getElementById('noscript').style.display='none'}catch(e){}</script>
添加到index.html
。