反応仮想化のスティッキーヘッダー

Question

反応仮想化のコンポーネントListを使用して多数のアイテムを表示しています。私の実装では、項目がセクション化されているので、セクションヘッダーをスティッキーにして、ユーザーがスクロールダウンしても現在のセクションが表示されるようにします。基本的には、スクロール位置が変更されたときにセクションヘッダーを破棄するには、反仮想化NOTを使用する必要があります（ただし、他のアイテムは破棄し続けます）。今はこれを行う方法はありますか？彼らがあまりにも狂っていない限り、私はハックに開放されています。

Answer 1

私があなたの質問を正しく理解していれば、スティッキーヘッダーをスプレッドシートにしたいと思っています。 ScrollSyncコンポーネントでこれを行うことができます。demo/docsをご覧ください。ここで

は、ドキュメントに表示さexmapleです：

import { Grid, List, ScrollSync } from 'react-virtualized' 
import 'react-virtualized/styles.css'; // only needs to be imported once 

function render (props) { 
    return (
    <ScrollSync> 
     {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => (
     <div className='Table'> 
      <div className='LeftColumn'> 
      <List 
       scrollTop={scrollTop} 
       {...props} 
      /> 
      </div> 
      <div className='RightColumn'> 
      <Grid 
       onScroll={onScroll} 
       {...props} 
      /> 
      </div> 
     </div> 
    )} 
    </ScrollSync> 
) 
} 

Answer 2

私たちはあなたに同様の要件を持っていた - 私たちは、スティッキーヘッダをサポートするように区画されたリストが必要です。反応仮想化リスト/グリッドではこれを達成できませんでしたので、スティッキーヘッダーをサポートするhttps://github.com/marchaos/react-virtualized-sticky-treeを作成しました。

例hereを参照してください。