javascript - react : Reorder list causes unwanted transitions

Question

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

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

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

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

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

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

Answer 1

确保为列表中的每个元素设置了 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.

Source