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

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

至

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

我成功处理动画（通过父节点移动DOM节点）并将 b 替换为 a ，同时创建一个新的 a2 组件 .

问题是，一旦我要求React重新呈现根组件（通过放置 a2 ），我就会遇到一个不变的违规行为 . 实际上，我手动改变了DOM，并且可能会改组数据重新连接 .

我怎样才能按照React的最佳实践完成这样的工作流程？

javascript reactjs