React 16警告"warning.js:36警告:不要指望服务器HTML在<div>中包含<div>."

Question

我正在使用React 16 beta(反应光纤)和服务器端渲染

我明白这是什么意思？

warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>.

Answer 1

这很奇怪，但对我来说，问题是我的密码管理器扩展（LastPass）注入了一些 HTML，其中我有一些输入字段...我禁用了扩展，错误消失了 \xe2\x80\x8d\xe2\x99\x82\ xef\xb8\x8f

\n

Answer 2

只需改变快递回复即可

<body>
    <div id="root">
        ${markup}
    </div>
</body>

至

<body>
    <div id="root">${markup}</div>
</body>

删除标签之间的空格

你能解释一下为什么你会建议这个解决方案吗？ (6认同)
当您尝试为您的反应应用补水时会出现此问题。生成的反应应用程序使用生成的标记重新水合，当时它在 jsx 标签之间显示空白。结帐此链接 https://reactjs.org/docs/react-dom.html#hydrate (6认同)
谢谢！我在这个问题上浪费了 2 天，但没有一个解决方案是好的。 (2认同)
这应该是公认的答案。目前的只是告诉了问题是什么，没有给出解决方案。 (2认同)

Answer 3

在反应代码中查找该错误,似乎当SSR html无法重新水化时会发生这种情况.

所以你最初在某种程度上在客户端与服务器上呈现不同的树.

警告名称`warnForDeletedHydratableElement`和消息`不要指望服务器HTML包含...`.这个警告肯定会更加冗长...... (4认同)
您能否澄清“最初在客户端与服务器上渲染不同的树”的含义。我有同样的问题，我找不到任何解决方案？ (2认同)
@e.omar 我使用上下文来传递 SSR 变量。在服务器上它设置为 true，在客户端上它在第一次渲染时设置为 true，然后设置为 false。 (2认同)