=> {)
const stateStep = { step1: 1, step2: 0, step3: 0 }
return (
<>
<div className="status_bar">
<span className="status_bar__title">Experiment creation</span>
</div>
{stateStep.step1 === 1 && <SelectApp />}
{stateStep.step2 === 1 && <SelectStore />}
{stateStep.step3 === 1 && <ChooseExperiment />}
</>
);
}
в нем импортированны 3 компонента (отдельные окна), которые нужно показывать, в зависимости от клика Далее или Назад
В каждом из этих 3 импортированны отдельные компоненты кнопок Далее или Назад
Пример одного окна
<SelectApp />
function SelectApp(props) {
return (
<>
<div className="app">
<div className="button">
<div></div>
<NextButton />
</div>
</>
);
}
Вопрос
в том, как реализовать смену окно при клике на какую=то из кнопок?
То есть, кликаем на кнопку Next в компоненте SelectApp и в App меняется состояние с 0 на 1 и показывается следующее окно
1. Подключить реакт-роутер 2. Или типа такого const [currentStep, setCurrentStep] = useState(0) const components = [<Comp1>, <Comp2>, <Comp3>] return { <div> {components[currentStep]} </div> }
Обсуждают сегодня