如何使用 react-window List + Infinte Loader 显示用户当前的索引

【问题标题】：How to show the index the user is currently with react-window List + Infinte Loader如何使用 react-window List + Infinte Loader 显示用户当前的索引
【发布时间】：2020-12-23 17:33:03
【问题描述】：

当我想向我的用户显示滚动时他/她在列表中的哪个位置时，我遇到了这个问题。简而言之，我想要一个计数器来指示可见行的当前索引。

这可以通过onItemsRendered来实现。

但是，当使用react-window-infinite-loader 时，该道具取自需要加载的孩子的值，否则它会卡在加载状态。

onItemsRendered={onItemsRendered}

【问题讨论】：

标签： reactjs infinite react-virtualized react-window

【解决方案1】：

在浏览了开发者的代码后，我发现onItemsRendered是如何工作的。

它需要visibleStartIndex,visibleStopIndex 才能返回正确的状态。因此，要获取当前行并返回正确的状态，请执行以下操作。

<List
        className="List"
        height={200}
        itemCount={1000}
        itemSize={200}
      
        onItemsRendered={({visibleStartIndex,visibleStopIndex})=> {
          
        this.setState({counter: visibleStartIndex+1})
        return onItemsRendered({visibleStartIndex,visibleStopIndex})
        }
      
      }
        
        ref={ref}
        width={300}
      >
        {Row}
      </List>
    )}

此外，这是一个工作示例：https://stackblitz.com/edit/react-list-counter

【讨论】：