有没有一种方法可以在不有条件地渲染 NextJS 中的每个步骤的情况下进行多步表单？

Question

我正在尝试在 NextJS.Now 中创建一个多步骤表单，我只是有条件地呈现每个步骤的状态作为步骤 number.is 还有另一种更好的方法吗？

const [showStep, setshowStep] = useState<number>(1);
 function RenderStep() {
   switch (showStep) {
     case 1:
       return <StepOne setStep={setshowStep} />;
     case 2:
       return <StepTwo setStep={setshowStep}/>;
     case 3:
       return <StepThree setStep={setshowStep}/>;
     case 4:
       return <StepFour setStep={setshowStep}/>;
     default:
       return <StepOne setStep={setshowStep} />;
   }
 }
 return (
   <div>
     <Page>
       <Link href="/campaigns">back</Link>
       <RenderStep />
     </Page>
   </div>
 );
}

Answer 1

也许一个简单的方法必须创建一个包含您的步骤内容的 <Step> 组件，如下所示：

import {PropsWithChildren} from "react";

interface StepProps {
  value: number;
  index: number;
}

const Step = (props: PropsWithChildren<StepProps>): JSX.Element | null => {
  const {children, index, value} = props;
  return index === value ? <>{children}</> : null;
}

这会让你之后拥有类似

的东西

<Step index={0} value={showStep}>
// your step 0 content
</Step>
<Step index={1} value={showStep}>
// your step 1 content
</Step>

等等。

有没有一种方法可以在不有条件地渲染 NextJS 中的每个步骤的情况下进行多步表单？

is there a way to do multi-step form without conditionally rendering each step in NextJS?

forms

reactjs

next.js