在 React 和 setState 中有条件地渲染组件/元素时出现问题

Question

I have a react login/signup form that when you land on the page you are on the signup section, I need to display the login section when clicking log in, and to display the products like it does when you click Get Started from either of the signup or login components, with the signup section disappearing. Both signup and login should virtually be the same just different inputs and display in the same space.

My issue is I have the signup and Get started portion displaying and functioning correctly, but cant seem to figure out how to correctly set the state for when a user clicks the login button and having it switch to display that component instead of signup.

I believe my part of my issue is in this statement:

render() {
    const { requestedPostsThatWeGotFromGecko } = this.state;
    const { loginStatus } = this.state;
    return (
       <div className="gecko">
        {requestedPostsThatWeGotFromGecko ? (
          <Cards />
        ) : loginStatus ? (
            <Login signup={() => this.clickMe()} />
        ) : (
          <SignUp login={() => this.clickMe()} />
        )
        }
      </div> 
    );
  }

The Gecko is my main app structure pulling most of it in, with signup, login, and cards being my other components.

SignUp Component

 import React from 'react'; import Login from '../LogIn'; //import CoolTabs from 'react-cool-tabs'; export default class SignUp extends React.Component { render() { const onClick = () => { this.props.login(); console.log('rich'); } return ( <div className='sign-up'> <table className='sign-up-form'> <tbody> <div class="gecko-signup__tabs"><button id="gecko-signup" data-selected="yes">Sign Up</button> <button id="gecko-login" data-selected=""onClick={this.setState.loginClose}>Log In</button></div>... <td colSpan="2"><input id="getStarted" type="submit" value="Get Started" onClick={onClick}/></td> </tr> </tbody> </table> </div> ); } }

Login Component

 import React from 'react'; import SignUp from '../SignUp'; export default class Login extends React.Component { render() { const onClick = () => { this.props.signup(); console.log('rich'); } return ( <div className='login'> <div className="login" ref={el => (this.div = el)}></div> <table className='sign-up-form'> <tbody> <div class="gecko-signup__tabs"> <input id="gecko-signup" value="Sign Up" onClick={SignUp} /> <input id="gecko-login" value="Log In" onClick="" /> </div> <tr> <td> <p id="signUpFree">Welcome Back</p> </td> </tr> <div id="inputs-section"> <div class="field-wrap"> <label>Email Address<span class="req">*</span></label> <input type="email"required autocomplete="off"/> </div> <div class="field-wrap"> <label>Password<span class="req">*</span></label> <input type="password"required autocomplete="off"/> </div> <tr> <td colSpan="2"><input id="getStarted" type="submit" value="Log Me In" onClick={onClick}/></td> </tr> </div> </tbody> </table> </div> ); } }

Is there a simple way to alternate between these three based on default value, or what button is being pressed? I have looked at react-router-dom but found myself tearing a lot of my functionality so far apart.

Answer 1

1. You could add the auth type as the state in your React component.
2. Depending on what the user has clicked, update the React state.
3. Know the component corresponds to the state.

this.state = {
 authType: "signup"
}

render() {
  if (authType === "signup") return <Signup />
  if (authType === "login") return <Login />
}

or better,

you could use different routes for login and signup using react-router . And show them differently.