对数组元素排序后 DOM 元素中丢失滚动位置

Losing scroll position in DOM-element after sorting array elements

问题: 对数组元素排序后,滚动位置丢失。 一个有趣的事实是,那些被移动到数组末尾的元素的位置丢失了。

问题: 如何在对元素数组进行排序时不丢失滚动位置?

重现步骤

  1. 更改每个 DOM 元素的滚动位置。
  2. 按“btn reverse”按钮。

当前行为: 第一个元素保存滚动位置。 第二个和第三个元素重置滚动位置。

预期行为: 所有元素都必须保留其滚动位置。

示例代码(滚动所有 DOM-元素并按“btn reverse”): https://stackblitz.com/edit/react-d2raex?file=src%2FApp.js

对于您正在使用的 key,您要求 List 组件呈现相同的 DOM 节点,但在不同的位置。它必须删除它们才能做到这一点。 DOM Element 界面不提供任何 API 来重新排序元素。

原始讨论在这里:https://github.com/facebook/react/issues/24640