React DataGrid：如何知道正在渲染哪些行？

Question

React DataGrid 支持虚拟化。这样，它只根据高度显示可见的行数。

在我的组件中，我想知道哪些行当前是可见的（一旦加载网格并在每次滚动之后）。有可能吗？

谢谢。

Answer 1

根据 react-data-grid 文档，https://adazzle.github.io/react-data-grid/docs/implementation-notes，我们可以访问以下道具

rowVisibleStartIdx - 要呈现到画布的第一个可见行的索引。

rowVisibleEndIdx - 要呈现到画布的最后一个可见行的索引。

通过可见行开始和结束索引，您可以断言当前在表格画布 onScroll 上可见的行。

为表格提供 onScroll 处理程序

onScroll = ({ rowVisibleStartIdx, rowVisibleEndIdx }) => {
   console.log(rowVisibleStartIdx, rowVisibleEndIdx);
   // The visible indexes will be updated as your canvas view port changes.
   // use this to assert the currently visible rows from your data.
};

<ReactDataGrid
   // ... other props
   onScroll={this.onScroll}
/>

希望对您有所帮助！