如何将 InfiniteLoader 与 WindowScroller 结合起来？

Question

如何在 window 滚动器中创建无限滚动列表？（与 Facebook 时间线相同 - Mock up）?

下面是我试过的代码，但它没有按预期工作。它只显示第一个项目，之后不再显示任何内容。

<div className={styles.WindowScrollerWrapper}>
    <InfiniteLoader
      isRowLoaded={this._isRowLoaded}
      loadMoreRows={this._loadMoreRows}
      rowCount={list.size}
      threshold={10}>
      {({ onRowsRendered, registerChild }) => (
        <WindowScroller>
          {({ height, isScrolling, scrollTop }) => (
            <AutoSizer disableHeight>
              {({ width }) => (

                <List
                  ref={registerChild}
                  className={styles.List}
                  autoHeight
                  height={height}
                  width={width}
                  onRowsRendered={onRowsRendered}
                  rowCount={list.size}
                  rowHeight={30}
                  rowRenderer={this._rowRenderer}
                  scrollToIndex={randomScrollToIndex}
                  />
              )}
            </AutoSizer>
          )}
        </WindowScroller>
      )}
    </InfiniteLoader>
</div>

非常感谢。

更新

这是要演示的 URL：https://plnkr.co/edit/akyEpZ0cXhfs2jtZgQmN

Answer 1

基于 your Plnkr, here's a corrected Plnkr 显示它应该如何工作。（您忘记将 scrollTop 参数从 WindowScroller 传递到 child List。）

给你：

    <InfiniteLoader
      isRowLoaded={this._isRowLoaded}
      loadMoreRows={this._loadMoreRows}
      rowCount={list.size}
      threshold={10}>
      {({ onRowsRendered, registerChild }) => (
        <WindowScroller>
          {({ height, isScrolling, scrollTop }) => (
            <AutoSizer disableHeight>
              {({ width }) => (
                <List
                  ref={registerChild}
                  className="List"
                  autoHeight
                  height={height}
                  width={width}
                  onRowsRendered={onRowsRendered}
                  rowCount={list.size}
                  rowHeight={30}
                  rowRenderer={this._rowRenderer}
                  scrollTop={scrollTop} />
              )}
            </AutoSizer>
          )}
        </WindowScroller>
      )}
    </InfiniteLoader>

如何将 InfiniteLoader 与 WindowScroller 结合起来？

How is possible to combine InfiniteLoader with WindowScroller?

react-virtualized