Reactjs 如何使用next js有条件地呈现react表单

我是web开发的新手，正在与next js进行一个小项目，我有一个餐馆登记表，其中有许多输入，这就是为什么我想将其分为两页，第一页包含表单的前半部分，单击“下一步”按钮，用户将获得表单的其余部分。 为此，我想显示表单的前半部分，然后在单击“下一步”后，让这半部分消失并显示下半部分。这非常简单，您可以从我的代码中理解：

 export default function RestaurantRegistration() {
 let turnPage = false 

  const turnToSecondPage = () => {
  turnPage = true 
      }
    return (


<React.Fragment turnPage={false} >
      
       //FIRST HALF FORM CODE
    <Button
        onClick={() => {turnToSecondPage()}}
       >
       Next
      </Button>
      </div>  
   </div>
</React.Fragment>
<React.Fragment turnPage={true} >
     
 //SECOND HALF OF FORM CODE 
</React.Fragment>

导出默认函数RestaurantRegistration（）{
让翻页=假
const turnToSecondPage=（）=>{
翻页=真
}
返回(
//前半形式代码
{turnToSecondPage（）}}
>
下一个
//表单代码的后半部分

但是我弄错了

---

那么这里的问题是什么？有没有更好的方法来完成我想做的事情？

在这段代码中，您有两个主要错误 首先，你不能通过道具来做出反应 第二，即使你可以，它仍然不会显示你的第二页

你可以用这样的东西

export default function RestaurantRegistration() {
const [turnPage,setTurnPage]=useState(false);

  const turnToSecondPage = () => {
  setTurnPage(true)
      }
    return (


<React.Fragment>
      {!turnPage &&<div>
       //FIRST HALF FORM CODE
    <Button
        onClick={turnToSecondPage}
       >
       Next
      </Button>
</div>
}
{turnPage && <div> ...</div>}

</React.Fragment>

导出默认函数RestaurantRegistration（）{
const[turnPage，setTurnPage]=使用状态（false）；
const turnToSecondPage=（）=>{
设置翻页（真）
}
返回(
{！翻页&&
//前半形式代码
下一个
}
{翻页&&…}

您读过这篇文章吗？您需要更改状态以重新提交代码。您没有更改任何状态，这就是为什么即使您的代码复制时没有错误/警告它也不会达到您期望的效果。非常感谢您，您的解决方案对我有效