反应 16 警告 "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>."

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>

删除标记之间的 space

Answer 3

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

我找到了解决办法。如果模式显示状态首先变为真，它会产生此警告。所以我首先将其设置为未定义，然后在页面呈现后将其设置为真。代码如下。

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

Answer 4

我有这个问题，我在更改这里解决了它：

<div>
    <Header />
    {children}
</div>

对此：

<div>
    <Header />
    <div>{children}</div>
</div>

反应 16 警告 "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>."

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

reactjs

react-fiber