使用react-virtualized和react-custom-scrollbars时出现问题

时间:2018-11-20 09:38:42

标签: reactjs react-virtualized

在使用带有React自定义滚动条的react虚拟化时出现问题

这是我的鳕鱼:

<Scrollbars
                className="custom__scrollbars"
                height={ this.state.windowHeight - 54 }
                ref="conversationlistscroll"
                renderThumbVertical={props => <div {...props} className="c-scrollbar__bar"/>}
                renderTrackVertical={props => <div {...props} className="c-scrollbar__track"/>}
                renderTrackHorizontal={props => <div {...props} className="track-horizontal" style={{display:"none"}}/>}
                renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" style={{display:"none"}}/>}
                autoHide
                autoHideTimeout={ 1000 }
                autoHideDuration={ 200 }
                onScroll={ this.handleScroll }
                >
                { this.renderInfiniteList() }
            </Scrollbars>

renderInfiniteList() {
    const conversations = this.props.conversations || [];
    const listStyle = {
      overflowX: false,
      overflowY: false,
    };
    return(

        <InfiniteLoader
            isRowLoaded={this.isRowLoaded}
            height={ this.state.windowHeight - 54 }
            loadMoreRows={this.handleInfiniteLoad}
            rowCount={conversations.length + 1}
          >
          {({onRowsRendered, registerChild}) => (
              <AutoSizer disableHeight>
                    {({ width }) => (
                        <List
                            ref={instance => (this.List = instance)}
                            onRowsRendered={onRowsRendered}
                            rowCount={conversations.length + 1}
                            rowHeight={80}
                            rowRenderer={this.rowRenderer}
                            width={width}
                            height={ this.state.windowHeight - 54 }
                            style={listStyle}
                          />
                        ) }
            </AutoSizer>
            )}
          </InfiniteLoader>
    )
}

这是问题 enter image description here

每次我滚动到底部时,InfiniteLoader都已加载好

,但仅渲染20个第一项 谁能告诉我如何解决这个问题 非常感谢你

对不起,这是handleScroll函数

handleScroll = ({ target }) => {
    const { scrollTop, scrollLeft } = target;
    const { Grid: grid } = this.List;
    grid.handleScrollEvent({ scrollTop, scrollLeft });
}

0 个答案:

没有答案