javascript - React中如何用其他组件内容替换当前组件内容

Question

嘿伙计们，我知道标题有点令人困惑，但我确信在这里您会更好地理解我需要什么。所以我正在尝试构建一个像 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>
);

}我想要做的就是，当我单击按钮时，MainApp 组件内容将接管页面并且登录菜单将消失，就像在每个具有登录屏幕的网站中发生的情况一样

Answer 1

我建议你了解ReactJs中的Router，它可以实现多个页面之间的导航。

另外，您可以定义状态属性 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
}

但我坚持认为你应该使用 Router 来实现高效的解决方案。