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来实现有效的解决方案。

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

1 个答案: