Javascript 在React中为子组件的部分设置动画

我很难理解中的动画组件在涉及子组件中的元素时是如何反应的。为了搭建舞台，我有：

包含一些按钮的按钮组组件

包含一些按钮组的导航组件。导航组件创建按钮名称和回调的数组，然后将它们作为道具传递给按钮组组件

假设用户在一个页面上采取了一些改变导航的动作。更具体地说，我想从导航中的一个按钮组中淡出一个按钮

我很熟悉如何使用

reactcstransitiongroup

，我想在这种情况下使用它，但棘手的是导航组件是拥有动画触发器的组件，而按钮组组件是拥有需要褪色的按钮的组件。当导航组件重新呈现时，它将旧按钮组从DOM中丢弃，并构建一个全新的按钮组，这意味着旧按钮组永远没有机会淡出其按钮

问题:

• 我在这里使用了错误的抽象吗？如果我想根据导航状态淡出按钮，按钮是否必须属于导航而不是某个子组件

• 当导航重新渲染并向按钮组提供新的道具时，为什么按钮组会被丢弃并重建，而不是现有的按钮组只得到一个propsWillChange调用

---

没错，听起来您的子按钮组组件不需要重新渲染

如果要在名称/回调对数组上迭代以构建按钮，请确保每个按钮都有一个唯一的

key

属性；也许是名字，如果那是唯一的。这将为React提供一种方法，确定要添加或删除哪些按钮以及保留哪些按钮

---

这样，您的

reactcstransitiongroup

应该可以按预期工作

按钮使用唯一的

键

。但在我看来，当导航重新渲染时，整个按钮组似乎正在重新渲染。我如何防止这种情况？我可以给按钮组一个

键

来告诉React重新使用它吗？我实际上并没有迭代按钮组，所以我认为它不允许这样做。