React：重新排序列表导致不需要的转换
React: Reorder list causes unwanted transitions
我有一个用 React 实现的列表，可以通过几个按钮上下移动来重新排序。
我遇到的问题是因为我有一个使用 CSS 实现的 Toggle 组件并且在状态之间有转换，当我更改具有不同切换状态的两行之间的顺序时，我看到我只想看到的过渡，然后单击切换按钮，而不是在重新排序时看到。
为了更好的解释，这里是问题的 gif。
我理解这就是 React 的工作方式，它只是渲染和改变差异，这就是为什么它只是改变属性，这就是我看到过渡发生的方式。
我的问题是，有没有办法避免这种情况？
编辑： 解决方案是正确的。虽然我使用的是 key 属性，但它的值是数组的索引。这让 React 感到困惑，无法确定正确的元素。
确保为列表中的每个元素设置 key 属性。
这将使 React 能够重用现有的 DOM 元素，而不是重新渲染它们，这应该可以解决您的问题。它还应该提高流程中的性能。
[...] React supports a key attribute. When children have keys, React uses
the key to match children in the original tree with children in the
subsequent tree.
我有一个用 React 实现的列表，可以通过几个按钮上下移动来重新排序。
我遇到的问题是因为我有一个使用 CSS 实现的 Toggle 组件并且在状态之间有转换，当我更改具有不同切换状态的两行之间的顺序时，我看到我只想看到的过渡，然后单击切换按钮，而不是在重新排序时看到。
为了更好的解释，这里是问题的 gif。
我理解这就是 React 的工作方式，它只是渲染和改变差异，这就是为什么它只是改变属性，这就是我看到过渡发生的方式。
我的问题是，有没有办法避免这种情况？
编辑： 解决方案是正确的。虽然我使用的是 key 属性，但它的值是数组的索引。这让 React 感到困惑，无法确定正确的元素。
确保为列表中的每个元素设置 key 属性。
这将使 React 能够重用现有的 DOM 元素，而不是重新渲染它们，这应该可以解决您的问题。它还应该提高流程中的性能。
[...] React supports a
keyattribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.