React Virtualized MultiGrid with Infinite Loader

Question

我想通过无限加载来使用分页，但奇怪的是没有示例可以实现相同的效果。 在 MultiGrid 中实现分页是一个非常常见的用例。您能否提供相关信息或资源？

Answer 1

MultiGrid + InfiniteLoader + AutoSizer：

class MyComponent extends React.Component {
_infiniteLoaderChildFunction = (
    { onRowsRendered, registerChild },
    width,
    height,
  ) => {
    this._onRowsRendered = onRowsRendered;
    const {
      rowHeight,
      gridProps,
      onScroll,
      data,
      columns,
      overscanRowCount,
    } = this.props;
    const rowCount = data.length + 1; // data + header

    return (
      <MultiGrid
        {...gridProps}
        onSectionRendered={this._onSectionRendered}
        ref={registerChild}
        cellRangeRenderer={this.props.cellRangeRenderer}
        cellRenderer={this.renderCell}
        columnWidth={this.getColumnWidth}
        columnCount={columns.length}
        height={height}
        rowHeight={rowHeight}
        rowCount={rowCount}
        width={width}
        onScroll={onScroll}
        overscanRowCount={overscanRowCount}
        data={data}
        columns={columns}
      />
    );
  };

  _onSectionRendered = ({
    columnStartIndex,
    columnStopIndex,
    rowStartIndex,
    rowStopIndex,
  }) => {
    const { columns } = this.props;

    const startIndex = rowStartIndex * columns.length + columnStartIndex;
    const stopIndex = rowStopIndex * columns.length + columnStopIndex;

    this._onRowsRendered({
      startIndex,
      stopIndex,
    });
  };
render() {

return (
<AutoSizer onResize={this.onResize}>
        {({ width, height }) => {
          return (
            <InfiniteLoader {...infiniteLoaderProps}>
              {loaderProps =>
                this._infiniteLoaderChildFunction(loaderProps, width, height)
              }
            </InfiniteLoader>
          );
        }}
      </AutoSizer>);
}}