reactjs – 如何避免渲染时的React标记校验和警告

2023年10月21日 329次阅读

当利用同构渲染显示时间的React组件时,我偶尔会遇到服务器在A点渲染时间的问题,但是当客户端选择SPA时,从A点开始的时间已经变为B点,和React抛出一个React试图在容器中重用标记,但校验和是无效的警告：

《reactjs – 如何避免渲染时的React标记校验和警告》

当您显示更精细的时间单位(如秒)时,错误的发生显然更加明显,但是确保我不会在分钟,小时,日等边界上遇到此错误.

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

更多详情

我正在使用React-Intl FormattedRelative组件以友好的方式显示项目的创建日期.项目的创建日期当然在客户端和服务器之间保持相同(并在序列化的Flux存储中传递给客户端),但服务器渲染和客户端渲染时间差足够长,以至于渲染的HTML频繁 – 但并非总是如此 – 不同.

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

A new feature has been added to <FormattedRelative> instances in React Intl v2, they now “tick” and stay up to date. Since time moves forward, it was confusing to have a prop named now, so it has been renamed to initialNow. Any <FormattedRelative> instances that use now should update to prop name to initialNow:

用法：

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

您也可以在IntlProvider上提供此功能,在这种情况下,所有FormattedRelative实例都会稳定.

Note: The <IntlProvider> component also has a initialNow prop which can be assigned a value to stabilize the “now” reference time for all <FormattedRelative> instances. This is useful for universal/isomorphic apps to proper React checksums between the server and client initial render.

用法：

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

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

点赞