Reaction-virtualized中的粘滯標頭

Question

我在react-virtualized中使用List組件來呈現大量項目。在我的實現中，項目是分區的，我希望區域標題是粘性的，以便當用戶向下滾動時當前區域保持可見。實質上，我需要react-virtualized NOT在滾動位置改變時銷燬節標題（但繼續銷燬其他項目）。現在有什麼辦法可以做到嗎？只要他們不太瘋狂，我就會接受黑客攻擊。

Answer 1

如果我正確理解您的問題，您希望在電子表格中使用粘性標題。你可以用ScrollSync組件做到這一點，看看demo/docs。

這裏是在文檔中顯示的〔實施例：

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

我們不得不給你同樣的要求 - 我們需要用的粘頭支持切片的列表。我們無法通過react-virtualized Lists/Grids來實現，因此我創建了支持粘性頭文件的https://github.com/marchaos/react-virtualized-sticky-tree。

參見示例here。