Question

我正在使用React 16 beta（react-fiber）和服务器端渲染

我理解这是什么意思？

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

Answer 1

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

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

因此，您最初在客户端与服务器上呈现不同的树。

Answer 2

只需更改来自

的快速回复

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

到

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

删除代码之间的空格

Answer 3

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

我找到了解决方案。如果模态显示状态首先实现，则会产生此警告。所以我首先将它设为未定义，然后页面呈现我将其设置为 true。代码如下。

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

React 16警告“warning.js：36警告：不要指望服务器HTML在<div>中包含<div>。”

3 个答案: