1

在服务器上，出于 SEO 的原因，我们总是希望显示详细的 H1。然而，在移动客户端上，由于屏幕空间有限，我们希望显示较短的 H1。

这导致：Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

例如，想象一个关于第二次世界大战的页面，它是关于希特勒的。想要的结果是：

客户：<h1> History </h1>....（在手机等小型设备上）

服务器：<h1> History, World War 2, Hitler </h1>..（和桌面设备）

有人对如何解决这个问题有任何想法吗？是否应该忽略此警告？还是有更好的方法来实现这一目标？

4

1 回答 1

0

此消息可能不是由 H1 引起的，通常这是数据问题，例如检查您在客户端和服务器上输入应用程序的数据（道具）。如果有任何不同，React 会抛出这个警告。

澄清评论后编辑：

我会在仅在客户端触发的React 生命周期事件componentDidMount之一中修改客户端的标题，例如.

于 2017-05-08T18:24:52.743 回答