React 16 警告“warning.js:36 警告：没想到服务器 HTML 在 <div> 中包含 <div>。”答案

【问题标题】：React 16 warning "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>."React 16 警告“warning.js:36 警告：没想到服务器 HTML 在 <div> 中包含 <div>。”
【发布时间】：2018-01-03 03:47:24
【问题描述】：

我正在使用带有服务器端渲染的 React 16 beta (react-fiber)

这是什么意思？

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

【问题讨论】：

这是在哪里发生的？遇到错误的代码可能会有所帮助
我认为我的代码不会特别有用。我正在渲染服务器端并向客户端发送一个 html 字符串作为响应。这是任何 React SSR 方法的标准
可能与“服务器渲染器已完全重写，现在提供流模式（目前通过 react-dom/node-stream 公开）。服务器渲染不再使用标记验证，并且而是尽力附加到现有的 DOM，警告不一致。此服务器渲染器代码仍然非常新，因此可能存在问题。请报告它们。 github.com/facebook/react/issues/10294
我按照这个网址解决了我的问题。 blog.jannikwempe.com/…

标签： reactjs react-fiber

【解决方案1】：

我在 Next.js 中使用 Modal 时遇到了同样的警告。我正在努力在主页上创建一个弹出窗口。

我找到了解决方案。如果模态显示状态首先出现，则会产生此警告。所以我先把它设为 undefined ，然后在页面渲染后将它设置为 true 。代码如下。

 const [modalShow, setModalShow] = React.useState();
  useEffect(() => {
    if ( modalShow === undefined ) {
      setModalShow(true)
    }
  }, [modalShow])

【讨论】：

【解决方案2】：

只需更改快速响应

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

到

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

删除标签之间的空格

【讨论】：

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

【解决方案3】：

在反应代码中寻找该错误似乎是当 SSR html 无法再水化时发生的。

https://github.com/facebook/react/blob/7a60a8092144e8ab2c85c6906dd4a7a5815cff1f/src/renderers/dom/fiber/ReactDOMFiberComponent.js#L1022

因此，您最初以某种方式在客户端和服务器上呈现不同的树。

【讨论】：

警告名称warnForDeletedHydratableElement 和消息Did not expect server HTML to contain a ...。警告肯定会更冗长......
您能否阐明“最初在客户端与服务器上呈现不同的树”的意思。我有同样的问题，我想不出任何解决方案？
@e.omar 我使用上下文来传递 SSR 变量。在服务器上它设置为 true，在客户端上它为第一次渲染为 true，然后设置为 false。
如果您使用的是 next.js 并且错误上下文包含使用 next router、React.useEffect、SWR、mutate 等。你可以看看this comment。警告可能是路由器引起的。