react-base-demos
/
12-条件渲染.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 注意: 先引入 react基础库,再引入react dom解析库 -->
  <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script>
  <script src="lib/babel.min.js"></script>
</head>
<body>
  <!-- 创建react解析的容器 -->
  <div id="root"></div>
  <script type="text/babel">
    // 1. 创建 两个组件
    class UserGreeting extends React.Component {
      render(){
        return (
            <h1 style={{color: 'blue'}}>欢迎您:张三!</h1>
        )
      }
    }
    class GuestGreeting extends React.Component {
      render(){
        return (
          <h1 style={{color: 'red'}}>请登陆!</h1>
        )
      }
    }
    // 声明两个按钮组件
    class LoginButton extends React.Component {
      constructor(props){
        super(props);
      }
      // 在子组件,无法直接修改父组件
      // 在react中需要子类修改父类state就需要通过传入回调函数(控制反转)的形式处理
      // state数据是从源头过来的,必须通过调用源头的事件来修改数据
      render(){
        return (
          <button onClick={this.props.onClick}>登陆</button>
        )
      }
    }
    class LoginoutButton extends React.Component {
      constructor(props){
        super(props);
      }
      render(){
        return (
          <button onClick={this.props.onClick}>退出</button>
        )
      }
    }
    class Greeting extends React.Component {
      constructor(props){
        super(props);
      }
      render(){
        // 根据props.isLogin判断渲染哪个组件
        if(this.props.isLogin){
          return <UserGreeting/>
        }
        return <GuestGreeting/>

      }
    }
    // 定义LoginControl组件
    class LoginControl extends React.Component {

      constructor(props){
        super(props);
        // isLogin 需要是动态的
        this.state = {
          isLogin: false
        }
        // 这里需要对行内绑定的事件进行bind绑定
        this.doLogin = this.doLogin.bind(this);
        this.doLogout = this.doLogout.bind(this);
      }
      doLogout(){
        //退出
        this.setState({
          isLogin: false
        })
      }
      doLogin(){
        this.setState({
          isLogin: true
        })
      }
      render(){
        // button需要被渲染 但是到底渲染哪一个组件需要根据isLogin状态来判断
        var button;
        // 登陆状态,应该显示退出按钮
        if(this.state.isLogin){
          // 变量来储存元素
          button = <LoginoutButton onClick={this.doLogout}/>;
        }else{
          button = <LoginButton onClick={this.doLogin}/>;
        }
        return (
          <div>
            <Greeting isLogin={this.state.isLogin}/>
            {button}
          </div>
        )
      }
    }
    // 使用react 相关api 渲染到容器
    ReactDOM.render(<LoginControl/>,document.getElementById('root'));
  </script>
</body>
</html>