InfiniteLoader'ı WindowScroller ile birleştirmek nasıl mümkündür?

Question

Sonsuz bir kaydırma listesi nasıl oluşturabilirim ama bir pencere kaydırıcısında? (Facebook zaman çizgisi ile aynı - Mock up)?

Denediğim kod aşağıdadır, ancak beklendiği gibi çalışmaz. Sadece ilk öğeleri gösterir ve bundan sonra daha fazlasını göstermez.

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

Şimdiden çok teşekkürler.

Güncelleme İşte

URL demo şudur: https://plnkr.co/edit/akyEpZ0cXhfs2jtZgQmN

Answer 1

your Plnkr dayanarak, burada nasıl çalışır gösteren bir corrected Plnkr bu. (. Sen çocuk List için WindowScroller den scrollTop param geçmesine unutuyorlardı) İşte

gitmek:

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