Question

我一直在尝试使用react-virtualized列表和表来实现无限滚动。

我实现了一个与此example非常相似的无限滚动。

loadMoreRows

_loadMoreRows ({ startIndex, stopIndex }) {
    if(!completed){  //From redux store
      return new Promise(resolve => {
        loadData(() => resolve);
      });
    }
}

rowRenderer

 _rowRenderer ({ index, key, style }) {
    const row = list[index] //From store
    if(row) {
      content = row;
    } else {
      content = 'Loading'
    }
    return (
      <div
        className='row'
        key={key}
        style={style}
      >
        {content}
      </div>
    )
  }

我的名单是

<List
  ref={registerChild}
  className='List'
  height={1000}
  onRowsRendered={onRowsRendered}
  rowCount={this.state.rowCount}
  rowHeight={100}
  rowRenderer={this._rowRenderer}
  width={width}
/>

里面

<InfiniteLoader
  isRowLoaded={this._isRowLoaded}
  loadMoreRows={this._loadMoreRows}
  rowCount={this.state.rowCount}
>

List对我来说就像魅力一样。我想将List组件替换为Table。所以我用以下更改替换了列表，

<Table
  ref={registerChild}
  width={300}
  height={300}
  headerHeight={20}
  rowHeight={30}
  rowCount={this.state.rowCount}
  rowRenderer={this._rowRenderer}
  rowGetter = {({ index }) => list[index]}
>

{Object.keys(headers).map((headerKey, index) => {
  return (
    <Column
        label={headers[headerKey].label}
        dataKey={headerKey}
        width={100}
        key={index}
    />
  );
})}
</Table>

商店中的list格式为[{'key': 'value'}]。无限加载程序在控制台中没有显示任何错误，但该表为空，在rowRenderer中填充了一个Loading。最初this.state.rowCount为1，list为空。通过loadMoreRows我发送了一个动作来获取并填充list。之后我增加了rowCount，这对List组件工作正常。但由于第一次尝试时列表为空，因此loadMoreRows组件未触发Table，但无效。

接近这个的正确方法是什么？

带表的无限滚动 - React Virtualized

0 个答案: