react初体验

function Guest() {
  return (
    <h1>pls login in</h1>
  );
}
function User() {
  return (
    <h1>hi, user</h1>
  );
}
function Check(props) {
  const isLogin = props.isLogin;
  if (isLogin) {
    return <User/>
  }else {
    return <Guest/>
  }
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>login</button>
  );
}
function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>logout</button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.state = {
      isLogin: true
    }
  }
  handleLogin() {
    this.setState({isLogin: true});
  }
  handleLogout() {
    this.setState({isLogin: false});
  }
  render() {
    const isLogin = this.state.isLogin;
    let button = null;
    if (isLogin) {
      button = <LogoutButton onClick={this.handleLogout}/>
    }else {
      button = <LoginButton onClick={this.handleLogin}/>;
    }
    return (
    <div>
        <Check isLogin = {this.state.isLogin}/>
        {button}
    </div>
    );
  }
}

let root = document.getElementById('root');
ReactDOM.render(<LoginControl/>, root);