javascript - react-virtualized - 带有 Masonry 的 InfiniteLoader 不起作用

Question

我在 Masonry ( here ) 上使用 react-virtualized 的例子

而且它有效。但是现在我正在尝试将 InfiniteLoader 添加到示例中，但我无法让它工作。

我尝试过的事情:

• 不使用 WindowScroller 并定义我自己的高度

最初我认为它可以通过删除 WindowScroller 来工作，但从未调用过 loadMoreRows 回调。

isRowLoaded 回调也不会被调用。

一段代码演示它是怎样的:

<InfiniteLoader
  isRowLoaded={this._isRowLoaded}
  loadMoreRows={this._loadMoreRows}
  rowCount={myList.length}
>
  {({ onRowsRendered, isScrolling, registerChild }) => (
    <WindowScroller overscanByPixels={OVERSCAN}>
      {this._renderAutoSizer}
    </WindowScroller>
  )}
</InfiniteLoader>

从 _renderAutoSizer 来看，就像例子一样。没有变化。 Masonry 按预期工作，但无法实现无限滚动。

我知道我需要以某种方式使用 onRowsRendered。但是示例显示了列表和网格的用法。 Masonry 似乎无法与 InfiniteLoader 连接。

Answer 1

您可以使用onCellsRendered Masonry 方法

Callback invoked with information about the cells that were most recently rendered. This callback is only invoked when visible cells have changed: ({ startIndex: number, stopIndex: number }): void more here

并检查 stopIndex === (myList.length - 1) 是否有更多项目，然后调用一个方法来加载更多项目。