Javascript ReactJS中无缝动画的正确方式

我想使用ReactJS实现以下DOM变异，并对其设置动画，以便最终用户无法注意到它

<RootComponent>
  <MyComponent id="a"/>
  <div>
    <MyComponent id="b"/>
  </div>
  <MyComponent id="c"/>
</RootComponent>

到

我成功地处理了动画（通过在父节点中移动DOM节点），并将

b

替换为

a

，同时创建了一个新的

a2

组件

问题是，只要我要求React重新命名根组件（通过放置

a2

），我就会遇到一个不变的冲突。事实上，我手动修改了DOM，数据ID可能会被洗牌

---

如何按照React的最佳实践完成这样的工作流？

尝试在不首先操纵DOM的情况下设置动画，然后，在动画完成后触发重新渲染，以便最终用户看不到DOM移动。是否

reactCSStranisitionGroup

动画帮助：如果使用基本If/then or？：语句更改DOM节点，则不应看到任何错误。发布一个工作代码示例。

<RootComponent>
  <MyComponent id="a2"/>
  <div>
    <MyComponent id="a"/>
  </div>
  <MyComponent id="c"/>
</RootComponent>