时间戳

首页 > 解决方案 > 重新渲染reactjs时停止滚动条移动到顶部

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

问题描述

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

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

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

标签： reactjsreact-reduxreact-hooks

解决方案

发生这种情况是因为您在组件 EventListContainer内部放置了一个组件，EventsList这将导致每次更新状态时“重新渲染”。

您可以ScrollContainer直接在EventsList组件内移动return：

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组件之外。

沙盒示例。

推荐阅读