4

在为显示时间的 React 组件使用同构渲染时，我偶尔会遇到服务器在 point 渲染时间的问题A，但是当客户端作为 SPA 选择时，从 point 的时间A变为 point B，并且 React 抛出React attempted to reuse markup in a container but the checksum was invalid警告：

在此处输入图像描述

当您显示更细化的时间单位（如秒）时，错误的发生显然更加明显，但最好确保我不会在分钟、小时、天等边界上遇到这种情况。

有没有办法在客户端有效地告诉 React，“没关系，这里 DOM 的这一小部分可能与服务器端不同”？或者也许是我没有想到的另一种方式？

更多详情

我正在使用React-IntlFormattedRelative组件以友好的方式显示项目的创建日期。项目的创建日期在客户端和服务器之间当然保持相同（并在序列化的 Flux 存储中传递给客户端），但是服务器渲染和客户端渲染时间差刚好足够长，以至于渲染的 HTML 经常——但并不总是——不同。

4

2 回答 2

1

鉴于数据一呈现客户端就会发生变化，因此呈现该块服务器端是没有意义的。

所以制作一个小组件来呈现这部分信息，但只能在挂载后执行 force_update 。

在挂载之前，只需放置您希望用户在渲染完成之前立即看到的任何内容

于 2016-01-26T21:26:11.513 回答
1

这已通过 React Intl v2 修复。它添加了一个initialNow属性来稳定渲染时间。

React Intl v2 中的实例添加了一项新功能<FormattedRelative>，它们现在“勾选”并保持最新。随着时间的推移，现在命名的道具令人困惑，因此将其重命名为initialNow. <FormattedRelative>现在使用的任何实例都应更新为 prop name 为initialNow：

用法：

<FormattedRelative value={date} initialNow={Date.now()}/>

您也可以提供此信息，IntlProvider在这种情况下，所有FormattedRelative实例都已稳定。

注意：该<IntlProvider>组件还有一个initialNowprop 可以分配一个值来稳定所有<FormattedRelative>实例的“现在”参考时间。这对于通用/同构应用程序在服务器和客户端初始渲染之间正确的 React 校验和很有用。

用法：

<IntlProvider initialNow={Date.now()}>
  <FormattedRelative value={date}/>
</IntlProvider>

参考：https ://github.com/yahoo/react-intl/wiki/Upgrade-Guide#update-how-relative-times-are-formatted

于 2017-07-14T14:21:56.247 回答