Question

我在砌体上使用反应虚拟化的例子（here）

它有效。但现在我试图将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 ，就像示例一样。没有变化。砌体按预期工作，但无法实现无限滚动。

我知道我需要以某种方式使用onRowsRendered。但这些示例显示了Lists和Grids的用法。砌体似乎无法与InfiniteLoader连接。

Answer 1

您可以使用onCellsRendered石工方法

使用有关最近渲染的单元格的信息调用回调。仅当可见单元格已更改时才调用此回调：（{startIndex：number，stopIndex：number}）：void more here

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

Answer 2

根据this answer InfiniteLoader仅适用于Table，List和Grid。 InfiniteLoader docs：

请注意，此组件旨在帮助进行行加载。因此，它最适合与Table和List一起使用（尽管它也可以与Grid一起使用）。该组件与Collection组件不兼容。

react-virtualized - 带有砌体的InfiniteLoader不起作用

2 个答案: