状态变化时如何保持TableVirtuoso中的滚动位置？

Question

我有一个

MessagesTable

组件，它使用

TableVirtuoso

中的

react-virtuoso

来渲染表格。当

highlightedIndex

或任何其他状态发生变化时，

TableContainer

内的

VirtuosoTableComponents

滚动到表格顶部，重置滚动位置。我想保持滚动位置或防止其在任何状态更改时重置。

这是演示该问题的视频：视频链接

我尝试使用

useEffect

钩子手动设置滚动位置，该钩子在

highlightedIndex

更改时触发。但是，只要状态发生变化，此方法就会将滚动位置重置到表的顶部。我正在寻找一种解决方案，既可以在状态更改时保持滚动位置，也可以防止滚动位置完全重置。

Answer 1

使用您的状态来刷新 Virtuoso-react 组件中的

firstItemIndex

属性，例如

<Virtuoso
    ref={virtuoso}
    initialTopMostItemIndex={internalMessages.length - 1}
    firstItemIndex={Math.max(0, firstItemIndex)} //  here
    data={internalMessages}
    startReached={startReached}
    itemContent={(index, item) => { /* your list */ }}
/>

如果您想了解更多信息，可以查看： 反向无限列表示例