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

Question

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

这可以通过onItemsRendered.

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

onItemsRendered={onItemsRendered}

Answer 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