반응 가상화의 끈적한 헤더

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을 참조하십시오.