Многоступенчатый мод с Ant Design - PullRequest
Новая
       31

Многоступенчатый мод с Ant Design

0 голосов
/ 16 апреля 2020

Когда пользователь хочет что-то создать, открывается модальное окно, и в модале есть три шага / страницы.

Для каждого шага требуется, чтобы модал имел разные 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, который изменяет состояние контейнера при рендеринге потомка, но кажется хакерским. Дочерний рендеринг, затем говорит родителю, чтобы повторно сделать.

...