重新渲染reactjs时停止滚动条移动到顶部

【问题标题】：Stop scroll bar from moving to top when rerendering reactjs重新渲染reactjs时停止滚动条移动到顶部
【发布时间】：2020-04-27 22:37:27
【问题描述】：

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

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

ex/ 滚动到底部并单击“random30”，列表返回到“random1”

【问题讨论】：

标签： reactjs react-redux react-hooks

【解决方案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 组件之外。

sandbox 示例。

【讨论】：