我正在处理react（和样式组件）中的过渡，并得到了我不了解的这种行为。 Container.js中注释掉的行使其起作用，但是却不像我想要的（幻灯片的顺序）。
这是一个示例：https://codesandbox.io/s/holy-wind-3tojn?fontsize=14
基本上，一个容器组件具有多个子组件（元素组件）。
单击时，元素组件使用.move钩子添加CSS类（useState）。这个CSS类启动过渡，并在完成时调用方法。此方法从容器组件中删除该元素。
为了按代码顺序显示元素，我仅向每个孩子添加100- [child的索引]的z-index。 children.slice(1)删除数组的第一个元素。问题是在从DOM中删除第一个元素后，第二个元素具有.move CSS类。因此，第二个元素恰好在第一个元素消失的地方结束。
我以为可能会传播点击，但从未在第二个元素上调用setClassName方法。因此，我尝试检查DOM中发生了什么，这就是我发现的内容：https://imgur.com/a/Mna1bqW。
在我看来，似乎第二个div的内容只是被第一个div的内容所代替。 CSS类会更改，但是.move类仍然存在。
这是一个反应优化的事情吗？还是样式化的组件在这里搞乱了？毕竟，它将在应用.move之后在第一个div上以及在重新渲染后更新CSS类。
谢谢！