React：重新排序列表会导致不必要的转换

Question

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

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

这是一个问题的GIF，以便更好地解释。

我理解这就是React的工作原理，只是渲染和改变差异，这就是为什么它只是改变属性，这就是我看到转变发生的原因。

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

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

Answer 1

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

这将使得能够重用现有的DOM元素而不是重新呈现它们，这应该可以解决您的问题。它还应该改善过程中的表现。

  

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

Source