問題タブ [react-virtualized]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
react-virtualized - MultiGrid での CellMeasurer の使用
サポートされていないことをしようとしているのかもしれませんが、react-virtualized の CellMeasurer を MultiGrid で使用しようとしています。またScrollSync、ユーザーが右端までスクロールしたことを検出し、インジケーターを表示/非表示にするために を使用しています。
1 つの注意点は、どのデータ (行と列の両方) を操作するタブ コントロールがあるかということです。データが変更されたときに redux ストアにフラグを設定し、それを使用してセルを再測定しています。
それは私が期待するものにかなり近い働きをしています。初めて新しいタブに移動すると、セルはすべて正しく測定されますが、2 つの例外があります。
1) 最初の列 (1 つの固定列) は再測定されますが、左上と左下のグリッドの幅は更新されません。これにより、新しい測定値とデフォルトのサイズの間にギャップが残ります。スクロールすると、これは自動的に修正されます-ScrollSyncがあるため、かなり確実です。
スクロール前 スクロール
後
2) 列インデックス 1 がデフォルト幅より小さくなることはありません。これは最初の非固定列です。
より大きなコンテンツに対応:
次に、主な問題は、以前に表示されたタブに戻るときです。これが発生すると、新しいデータのフラグがまだ再測定をトリガーしているにもかかわらず、前のタブに存在していた列からの測定値が引き継がれます。キャッシュをクリアして何かをする必要があると思いますが、これまでの試みではすべての列がデフォルトの幅になりました。の特定のシーケンスがあり、CellMeasurerCache.clearAllそれはここで適切に機能しますか?MultiGrid.measureAllCellsMultiGrid.recomputeGridSize
与える
セル レンダラー
コンポーネントのライフサイクル
EDIT ここに plunker があります。この例は、私が説明していたことのほとんどを示しています。また、予想よりも行に高さを与えています（他の実装と何が違うのかわかりません）