在React

Question

我很难理解React中的动画组件如何涉及子组件中的元素。为了设定舞台，我有：

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

让我们假设用户对将更改导航的页面采取某些操作。更具体地说，我想从导航中的一个按钮组淡出其中一个按钮。

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

问题：

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

• 当导航重新渲染并且新的道具被赋予按钮组时，为什么按钮组会被删除并重建而不是现有的只是获得propsWillChange调用？

Answer 1

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

如果您正在迭代一组名称/回调对来构建按钮，请确保为每个按钮赋予唯一的key属性;也许是名字，如果这是唯一的。这将使React能够识别要添加或删除哪些按钮以及将哪些按钮留在原位。

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