如何在反应 stepzilla 的某些步骤中隐藏导航按钮

Question

I have five steps on react stepzilla but on first step I wanted to hide next button. I have tried:

    const steps =
        [
          {name: 'Step 1', component: <PaginationPage1 showNavigation={false}/>},
          {name: 'Step 2', component: <PaginationPage2/>},
          {name: 'Step 3', component: <PaginationPage3/>},
          {name: 'Step 4', component: <PaginationPage4/>},
          {name: 'Step 5', component: <PaginationPage5/>}
        ];

which doesn't help me. How can I hide the button on step 1?

Answer 1

Use your parent component's state in conjunction with the onStepChange callback:

function App() {
  let [showNavigation, setShowNavigation] = useState(false);
  let stepzillaProps = {
    onStepChange: step => setShowNavigation(step === 0 ? false : true),
    steps,
    showNavigation
  };
  return (
    <div className="App">
      <StepZilla {...stepzillaProps} />
    </div>
  );
}

Here is an example