React-Virtualized Autosizer가 VirtualScroll의 높이를 0으로 계산합니다.

Question

AutoSizer의 너비가 적절한 값을 제공하는 곳에서 Autosizer 높이가 지속적으로 0이되어 VirtualScroll 구성 요소가 표시되지 않습니다. 그러나 disableHeight prop를 사용하고 높이 (예 : 200 픽셀)에 고정 값을 VirtualScroll에 제공하면 VirtualScroll은 행을 예상대로 표시합니다. 아무도 틀린 것을 볼 수 있습니까?

궁극적으로 Autosizer는 Material-UI Dialog 구성 요소 안에 있어야합니다. 그러나 자동 채우기기를 div에 렌더링하기도했습니다. 같은 문제.

render() { 
return (
    <Dialog 
    modal={false} 
    open={this.state.open} 
    onRequestClose={this.handleClose} 
    contentStyle={pageOptionsDialog.body} 
    > 
    <div> 
    <AutoSizer> 
     {({ width, height }) => (
     <VirtualScroll 
      id="virtualScroll" 
      onRowsRendered={this.props.loadNextPage} 
      rowRenderer={this.rowRenderer} 
      height={height} 
      rowCount={this.props.rowCount} 
      rowHeight={30} 
      width={width} 
     /> 
    )} 
    </AutoSizer> 
    </div> 
</dialog> 
)} 

Answer 1

이는 일반적으로 부모의 스타일을 올바르게 설정하지 않았 음을 의미합니다.

게시 한 스 니펫에는 부모가 <div>이며 기본적으로 "블록"요소입니다. 즉, 자동으로 전체 너비가 채워집니다. 그러나 블록 요소에는 기본/기본 높이가 너무 AutoSizer, 그냥의 <div>에 스타일을 설정이 문제를 해결하려면 0

의 높이를보고하지이 중 height: 100% 또는 flex: 1 등 <div> 후 성장해야하며 AutoSizer는 높이를보고합니다 > 워드 프로세서가 너무 다른 유사한 개는 피할 수 0

체크 아웃 : * https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md#examples * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md

을