如何防止在重新渲染时自动滚动页面？

Question

我在 React 中遇到了一个奇怪而烦人的问题 - React 在重新渲染时自动滚动页面。

CodeSandbox 上的演示应用程序 - https://codesandbox.io/s/react-scroll-bug-demo-y7u50j?file=/src/App.js

重现步骤：

• 将页面滚动到列表的中间，因此它的第一个元素不再可见。
• 等待重新渲染发生。
• 查看页面自动滚动，以便第一个元素再次可见。

问题 - 当满足这些条件时，React 会自动滚动页面：

1. 我有一个垂直的项目列表。
2. 列表重新呈现（项目更改顺序）。
3. 列表在屏幕上可见，但第一个元素不可见（它位于屏幕上方）。

因此，当项目列表在屏幕上不可见时 - 没有自动滚动问题。另外，当列表顶部低于屏幕顶部时 - 也不会发生自动滚动。

我创建了一个Vanilla JavaScript应用程序来测试它是否是Chrome 特定的行为-没有错误，一切都很好- 使用 Vanilla JS，当屏幕上重新呈现项目列表时不会发生滚动。它只发生在 React 应用程序中，而且非常烦人。

正如您从我的 CodeSandbox 演示中看到的：

• 任何地方都没有滚动调用，但它仍然会发生。
• 我没有单击任何内容 - 只需将页面滚动到列表中间，然后就会看到页面自动滚动到顶部。
• 列表的高度不变。这里不应该发生布局跳转。

预期行为- 重新呈现列表时不会发生滚动。

知道如何防止这种自动滚动吗？

Answer 1

看起来反应与按键混淆了。如果使用随机值，一切都会按预期进行：

<div key={Math.random()} className="item">

更新

这种行为称为滚动锚定。您可以像这样禁用它：

<div key={Math.random()} className="item">