反应：重新排序列表会导致不需要的转换

Question

我有一个在 React 中实现的东西的列表，可以通过几个按钮重新排序以上下移动。

我遇到的问题是，因为我有一个用 CSS 实现的切换组件并且在状态之间有转换，所以当我更改具有不同切换状态的两行之间的顺序时，我看到的转换只有想要查看然后单击切换，而不是在重新排序时。

这里是问题的 gif 以便更好地解释。

我知道 React 就是这样工作的，它只是渲染和改变差异，这就是为什么它只是改变属性，这就是我看到过渡发生的方式。

我的问题是，有没有办法避免这种情况？

编辑： 解决方案是正确的。虽然我使用的是 key 属性，但它的值是数组的索引。这让 React 感到困惑，无法确定正确的元素。

Answer 1

确保为列表中的每个元素设置了key 属性。

这将使 react 能够重用现有的 DOM 元素，而不是重新渲染它们，这应该可以解决您的问题。它还应该提高过程中的性能。

---

[...] React 支持 key 属性。当孩子有钥匙时，React 使用 将原始树中的孩子与 后续树。

Source