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

一种可能的解决方法是将height变量移动到组件的状态并将其设置为初始状态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.