React Virtualized MultiGrid with Infinite Loader

Posted 2023-02-21

【中文标题】React Virtualized MultiGrid with Infinite Loader

【英文标题】：

【发布时间】：2018-07-16 12:42:58

【问题描述】：

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

【问题讨论】：

文档有一个“分页”（或分块）列表的配方github.com/bvaughn/react-virtualized/blob/master/docs/…

【参考方案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>);