问题 React 16：警告：预期的服务器HTML在中包含匹配的

自升级到React 16后，我收到以下错误消息：

warning.js:33 Warning: Expected server HTML to contain a matching <div> in <body>.

通常导致此错误消息的原因是什么，以及如何修复？

8229

2017-09-27 09:00

起源

你能展示一些代码吗？ - Shubham Jain

如果您在升级后看到意外情况，请提交问题并提供示例。否则我们无法知道有什么东西被打破了。谢谢！ - Dan Abramov

@DanAbramov你是对的。事实证明这是一个与React无关的问题，但是自从v16注入客户端脚本标记（Browsersync）时，它无法补充水分，而且需要使用React组件，从而产生上述错误。这在React v15中似乎并非如此。通过将插入的脚本标记移动到正文的末尾来修复。 - Anton Holmquist

@AntonHolmquist你能解释一下更多细节吗？什么剧本你移动到身体的尽头。我现在正面对这个警告。 - Alfred Crosby

答案:

如果你使用 ReactDOM.hydrate 要启动Web应用程序，您将看到此警告。

如果您的申请没有 ssr，请用 ReactDOM.render 开始。

2017-11-14 02:59

该 suppressHydrationWarning={true} prop也可以用于渲染元素。但是，作为文档要点，这个道具几乎不能使用。更好的解决方案是使用 hydrate() 要么 render() 正确： reactjs.org/docs/react-dom.html#hydrate - AxeEffect

那么，这个警告是什么？ - Ben P.P. Tung

这似乎是因为Browsersync在服务器端不存在的客户端主体中插入脚本标记。因此React无法附加到服务器渲染。

-1

2017-09-27 09:09

那么解决方案是什么？ - albanx

我没有使用身体作为React的容器，但在保湿方面也得到了这个错误。你是如何解决的？ - Apache

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？