React-Grid-Layout：サイズ変更時にアイテムを再レンダリングする方法

Question

react-grid-layoutとreact-custom-scrollbarsを使用してパネルのグリッドを作成しています。

class GridLayoutWithScrollableItems extends React.Component { 

    onResize() { 
     this.setState({forceRenderAfterResize: Date.now()}) 
    } 

    render() { 
     return (
      <ReactGridLayout width={900} onResize={this.onResize.bind(this)}> 
       <div key="a"> 
        <Scrollbars> 
         <p>Lorem ipsum dolor ....</p> 
        </Scrollbars> 
       </div> 
       <div key="b"> 
        <Scrollbars> 
         <p>Aenean purus magna ...</p> 
        </Scrollbars> 
       </div> 
      </ReactGridLayout> 
     ) 
    } 
} 

ワークスリサイズ以外期待通り：：それは私がforceRenderAfterResizeダミー状態変数ということを設定しています理由である再レンダリングする場合Scrollbarsだけそのバーを更新するここでは、コードの簡体版です。

これを達成するにはどうすればよいでしょうか？上記のソリューションはちょっと不思議で、サイズ変更されたアイテムだけでなくすべてのアイテムを再レンダリングします。

Answer 1

あなたのonResizeメソッドでforceUpdate()を呼び出します。ある人は、反応文書を正しく読まなかったか、forcingUpdateよりも設定状態が優先されていると主張しているかもしれませんが、その状態が実際の状態である場合にのみ、setComponentUpdateロジックが実装されていれば再描画を保証しません。 UIを介して行わUIの変更の上にあなたの状態を濁っする理由、あなたは特にブラウザがサイズ変更を決定した場合に再レンダリングしたい：

onResize() { 
    this.forceUpdate(); 
}