InfiniteLoaderとWindowScrollerをどのように組み合わせることが可能ですか？

Question

無限のスクロールリストを作成するにはどうすればよいですか？ （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です：your Plnkrに基づいてhttps://plnkr.co/edit/akyEpZ0cXhfs2jtZgQmN

Answer 1

、ここcorrected Plnkrは、それがどのように動作するかを示しています。 （あなたがWindowScrollerから子ListにscrollTopのparamを渡すのを忘れた。）

ここに行く：

<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>