我很难理解React中的动画组件如何涉及子组件中的元素 . 为了设定舞台，我有：
-
包含一些按钮的按钮组组件 .
-
包含一些按钮组的导航组件 . 导航组件创建按钮名称和回调的数组，然后将它们作为道具传递给按钮组组件 .
让我们说用户在一个会改变导航的页面上采取一些行动 . 更具体地说，我想从导航中的一个按钮组淡出其中一个按钮 .
我很熟悉如何使用 ReactCSSTransitionGroup 并想在这种情况下使用它，但棘手的部分是导航组件是拥有动画触发器的东西，而按钮组组件是拥有按钮的东西需要褪色 . 当导航组件重新渲染时，它会从DOM中抛弃旧的按钮组并构建一个全新的按钮组，这意味着旧的按钮组永远不会有机会淡出其按钮 .
问题：
-
我在这里使用了错误的抽象吗？如果我想基于导航状态淡出按钮，按钮是否必须属于导航而不属于某些子组件？
-
当导航重新渲染并且新的道具被赋予按钮组时，为什么按钮组被破坏并重建而不是现有的只获得propsWillChange调用？
1 回答
你没错，听起来你的子按钮组组件不需要重新渲染 .
如果您正在迭代一组名称/回调对来构建按钮，请确保为每个按钮赋予一个唯一的
key属性;也许是名字，如果这是唯一的 . 这将使React能够识别要添加或删除哪些按钮以及将哪些按钮留在原位 .有了这个，你的
ReactCSSTransitionGroup应该按预期工作 .