条件渲染

• 如果 render 函数返回 null，则不渲染任何东西

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    username: '',
    password: ''
  }
  login = () => {
    const { username, password } = this.state;
    if (!username.length || !password.length) {
      alert('用户密码不能为空!');
      return;
    }
    console.log(username, password);
    this.props.login(username, password);
  }
  handleUsernameChange = (e) => {
    this.setState({
      username: e.target.value
    })
  }
  handlePasswordChange = (e) => {
    this.setState({
      password: e.target.value
    })
  }
  render() {
    return (
      <div className="login-form">
        <p>
          <input type="text" name="username" id="username"
            onInput={ this.handleUsernameChange }
          />
        </p>
        <p>
          <input type="password" name="password" id="password"
            onInput={ this.handlePasswordChange }
          />
        </p>
        <p>
          <button onClick={ this.login }>Login</button>
        </p>
      </div>
    )
  }
}

class Welcome extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>欢迎您，亲爱的用户~</h1>
        <button onClick={ this.props.logout }>退出登录</button>
      </div>
    )
  }
}

class Tip extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { tipShow } = this.props;
    if (!tipShow) {
      // 如果 render 函数返回 null，则不渲染任何东西
      return null;
    }
    return <p>我是提示</p>
  }
}

class App extends React.Component {
  state = {
    isLogin: false,
    count: 0,
    tipShow: false
  }
  constructor(props) {
    super(props);
  }
  login = (username, password) => {
    if (username === 'admin' && password === '123') {
      this.setState({
        isLogin: true,
        tipShow: true
      }, () => {
        console.log(this.state.isLogin);
      })
    } else {
      alert('用户名密码不正确');
      return;
    }
  }
  logout = () => {
    this.setState({
      isLogin: false,
      tipShow: false
    })
  }
  render() {
    const { isLogin, count, tipShow } = this.state;
    // if (isLogin) {
    //   return <Welcome logout={ this.logout } />
    // } else {
    //   return <LoginForm login={ this.login } />
    // }
    
    // 三目运算、与运算 写法:
    return (
      <div>
        {
          isLogin && <span>尊贵的用户</span>
        }
        {
          // 这样写不会显示 p ，会显示字符串 0（因为count是0，不走后边，但是会输出字符串0）
          // 只有当 count 为 boolean 类型的 false 、undefined、null 时，才不会渲染任何内容
          // 所以最好 toString 一下
          count.toString() && <p>会员等级: { count }</p>
        }
        {
          isLogin
            ? <Welcome logout={ this.logout } />
            : <LoginForm login={ this.login } />
        }
        <Tip tipShow={ tipShow } />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));