重新绘制reactjs时，停止滚动条移动到顶部

Question

我正在尝试创建一个面板，其中显示项目列表，一旦单击项目，右手边应该会显示所选项目。左手边应该包含一个项目列表。项目列表可能很长，因此，我限制了列表的最大高度，这样当它超过这个高度时，它会创建一个滚动条，这样用户就可以向下滚动查看列表的其余部分。问题是，每当单击列表底部的项目时，列表就会自动向上滚动到顶部。我有一种感觉，这是因为我正在使用一个状态来传递项目，当项目发生更改时，它会导致重新渲染，从而"重置"列表。有人能给我一个如何阻止这种情况发生的建议吗？任何建议都将不胜感激！

这是沙盒：https://codesandbox.io/s/sad-archimedes-3u4k0?file=/src/App.js

ex/滚动到底部，点击"random30"，列表返回到"random1">

Answer 1

之所以会发生这种情况，是因为您在EventsList组件内部放置了组件EventListContainer，这将导致每次更新状态时都会"重新渲染"。

您可以直接在EventsList组件return:中移动ScrollContainer

return (
<ListContainer>
<ScrollContainer>
{eventListSorted.map(event => {
return (
<EventContainer
onClick={e => {
onSelect(event);
setSelectedEvent(event);
}}
selected={selectedEvent ? selectedEvent.id === event.id : false}
>
{event.uiString}
</EventContainer>
);
})}
</ScrollContainer>
</ListContainer>
);

此外，您最好将eventListSorted阵列移动到EventsList组件之外。

沙箱示例。