Question

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

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

ex /滚动至底部，然后单击“ random30”，列表将回到“ random1”

Answer 1

之所以会这样，是因为您在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组件之外。

sandbox 示例。

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

1 个答案: