使用蚂蚁设计的多步骤模态

Question

当用户想要创建内容时，将打开一个模式，该模式中包含三个步骤/页面。

每个步骤都需要模态具有不同的okText，onOk()，title和width设置，因此看来我需要一种使内页组件能够修改模式。

我正在使用react-router来控制哪个步骤显示如下：

<Route path='/item/create'>
  <Modal title={'Create a new item'}>
    <Switch>
      <Route path='/item/create/step1'> <Step1/> </Route>
      <Route path='/item/create/step2'> <Step2/> </Route>
      <Route path='/item/create/step3'> <Step3/> </Route>
    </Switch>
  </Modal>
</Route>

如果模态位于<Step1/>内，那么当用户移至下一步时，它会重新打开动画，而我要避免这样做。我认为这是因为Step1 > Modal和Step2 > Modal会导致重新渲染。

那么实现这一目标的理想方法是什么？

我当前的解决方法是将useState的setter传递给每个Step的道具，当孩子渲染时，它会修改容器的状态，但是似乎很麻烦。子级渲染，然后告诉父级重新渲染。