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);

优质内容筛选与推荐>>
1、HttpModule与HttpHandler
2、FPGA基础知识了解
3、spring-cloud 微服务
4、Workbench利用Python驱动DM执行Js进行建模
5、数据结构与算法--归并排序

赞赏

长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

阅读

已发送

发送中