淡出旧元素，淡入新元素

Question

我是新手，我尝试过react animations。当在 TransitionGroup 中添加或删除元素时，它们工作得很好。但是如果我用相似的元素替换单个元素，react 会检测到该元素的内容已更改并且不会触发动画。

如何在同一位置淡出单个元素并淡入新元素？ 比如淡出login-div，淡入dashboard-div。

Answer 1

如果您的元素具有不同的key 属性，TransitionGroup 将卸载一个并安装另一个。

您可以在此处阅读有关密钥的更多信息：Composition vs Inheritance。