React SSR - window.height/widthを処理する

Question

私はReact with SSR FlowRouterを使用しています。このため、ラインの

：

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

私は、このような警告が出ます：

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.

私が原因で、クライアントとサーバのコードの違いのザッツを知っている（私はへのアクセスを持っていません私のサーバー上のウィンドウ）。

この警告を回避する方法はありますか？

Answer 1

あなたが直面している警告は、最初にレンダリングされたサーバー上のHTMLとクライアントのチェックサムエラーのためです。あなたが正しく指摘したように、これはサーバー上にwindowオブジェクトがないため、window.innerHeightを計算できないためです。これにより、divのstyle属性でレンダリングされたhtmlが異なり、警告が表示されます。

可能な回避策は、コンポーネントのstateにheight変数を移動し、componentWillMountで

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

チェックを実行し、ここで正しい高さを設定次いで0の初期状態に設定することであろう。このようにして、クライアントとサーバーの両方の初期レンダリングは同じになります。しかし、componentDidMountはクライアント上でのみ呼び出されるため、stateが変更されたときにwindowから正しいheightのコンポーネントを再レンダリングします。あなたが意図的にサーバーとクライアント上の別の何かを描画する必要がある場合は、2パスレンダリングを行うことができますdocs

から

。クライアント上で異なるものをレンダリングするコンポーネントは、this.state.isClientのような状態変数を読み取ることができます。trueにはcomponentDidMount()を設定できます。このようにして、最初のレンダーパスではサーバーと同じコンテンツがレンダリングされ、不一致は回避されますが、ハイドレーション後に追加のパスが同期して行われます。このアプローチでは、コンポーネントを2回レンダリングする必要があるため、コンポーネントの速度が低下するため、注意して使用してください。