Javascript 如何用React中的其他组件内容替换当前组件内容

嘿，伙计们，我知道这个标题有点让人困惑，但我相信在这里你们会更好地理解我需要什么。因此，我正在尝试构建一个像instagram这样的社交媒体应用程序，目前我正在构建登录组件，但由于我仍在学习如何使用react，我陷入了困境。因此，我有了我的登录组件：

 function LoginMenu (){ 
 const [email, setEmail] = useState(null);
 const [password, setPassword] = useState(null);
 return (
  <div style = {styles2}>
  <form className="form-signin" style = {styles}>
      <div className="form-label-group" >
        <label htmlFor="inputEmail">
          Email address
          <input
            type="email"
            id="inputEmail"
            className="form-control"
            placeholder="Email address"
            required
            autoFocus
            onChange = {event => setEmail(event.target.value)}
          ></input>
        </label>
      </div>

      <div className="form-label-group" >
        <label htmlFor="inputPassword">
          Password
          <input
            type="password"
            id="inputPassword"
            className="form-control"
            placeholder="Password"
            required
            onChange = {event => setPassword(event.target.value)}
          ></input>
        </label>
      </div>
      <button
        className="btn btn-lg btn-primary btn-block"
        onClick = {() => <MainApp/>}
        type="submit"
      >
        Sign in
      </button>
    </form>
  </div>
);

函数LoginMenu（）{
const[email，setEmail]=useState（null）；
const[password，setPassword]=useState（null）；
返回(
电子邮件地址
setEmail（event.target.value）}
>
密码
setPassword（event.target.value）}
>
}
type=“提交”
>
登录
);

}

---

我想做的就是，当我点击按钮时，MainApp组件内容将接管页面，登录菜单将消失，就像在每个具有登录屏幕的站点中发生的情况一样，我建议您了解ReactJs中的路由器，它可以在多个页面之间导航

否则，可以定义状态属性displayMain来更新渲染

例如：

let [displayMain, setDisplayMain] = useState(false); // initial value is false
if(displayMain){
   return <MainComponent/>; // Your main component to render
}
else{
   // your Login Component to render
   return <button onClick=>{()=>setDisplayMain(true)}/>; // update displayMain
}

let[displayMain，setDisplayMain]=useState（false）；//初始值为false
如果（显示主）{
return；//要渲染的主组件
}
否则{
//要呈现的登录组件
返回{（）=>setDisplayMain（true）}/>；//更新displayMain
}

---

但是我坚持认为你应该使用路由器来实现一个有效的解决方案。

你的例子解决了这个问题，我会尝试用你提到的有效方法来学习，但是我还是一个初学者，所以我会把它留到很晚：D，谢谢你的帮助。