meteor - React SSR - 处理 window.height/width

Question

我正在将 React 与 SSR FlowRouter 结合使用。

因为这几行:

var height = (Meteor.isClient ? window.innerHeight : 0);
<div style={{top: height+'px' }}>

我收到这样的警告:

警告:React 尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且服务器上生成的标记不是客户端所期望的。 React 注入(inject)了新的标记来补偿它的工作原理，但你失去了服务器渲染的许多好处。相反，找出为什么生成的标记在客户端或服务器上不同。

我知道这是因为客户端和服务器代码之间的差异(我无权访问服务器上的窗口)。

有什么办法可以避免这个警告吗？

Answer 1

您面临的警告是由于服务器和客户端上最初呈现的 html 之间存在校验和错误。正如您正确指出的那样，这是因为您在服务器上没有 window 对象，因此无法计算 window.innerHeight。这导致渲染的 html 在 div 的 style 属性中有所不同，并导致警告。

一个可能的解决方法是将 height 变量移动到组件的 state 并将其设置为初始状态 0。然后执行检查

this.setState({height: (Meteor.isClient ? window.innerHeight : 0)});

在 componentWillMount 中并在此处设置正确的高度。这样客户端和服务器的初始渲染将是相同的。但是，由于 componentDidMount 仅在客户端上调用，因此当 >状态已更改。

来自docs

If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a state variable like this.state.isClient, which you can set to true in componentDidMount(). This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. Note that this approach will make your components slower because they have to render twice, so use it with caution.