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

【问题标题】：Animate parts of child components in React在 React 中为子组件的部分设置动画
【发布时间】：2015-09-11 07:08:26
【问题描述】：

当 React 涉及子组件中的元素时，我很难理解如何为组件设置动画。为了做好准备，我有：

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

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

我熟悉如何使用ReactCSSTransitionGroup，并且会考虑在这种情况下使用它，但棘手的部分是导航组件是拥有动画触发器的东西，而按钮组组件是东西拥有需要淡入淡出的按钮。当导航组件重新渲染时，它会从 DOM 中丢弃旧按钮组并构建一个全新的按钮组，这意味着旧按钮组永远没有机会淡出其按钮。

问题：

我在这里使用了错误的抽象吗？如果我想根据导航状态淡出按钮，按钮是否必须属于导航而不是某些子组件？
当导航重新渲染和新的道具被赋予按钮组时，为什么按钮组会被丢弃并重建，而不是现有的只是得到一个 propsWillChange 调用？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您是对的，听起来您的子按钮组组件不需要重新渲染。

如果您要遍历一组名称/回调对来构建按钮，请确保为每个按钮赋予唯一的 key 属性；也许名字，如果那是唯一的。这将为 React 提供一种方法来识别要添加或删除哪些按钮以及保留哪些按钮。

这样，您的ReactCSSTransitionGroup 应该可以按预期工作。

【讨论】：

按钮确实使用了唯一的key。但在我看来，当导航重新渲染时，整个按钮组都在重新渲染。我该如何防止这种情况？我可以给按钮组一个key 告诉 React 重用它吗？我实际上并没有迭代按钮组，所以我认为它不会允许这样做。