React——条件渲染

条件渲染

React 中的条件渲染和 JavaScript 中的一样，使用JavaScript 运算符 if 或者条件运算符去创建元素来表现当前状态，然后让React 根据他没来更新 UI

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}
// 长啥样写在外部，具体事件处理放在了里面
function ButtonLoggin(props) {
  return (
    <button onClick={props.clickAction}>
      Login In
    </button>
  );

}
function ButtonLoggOut(props) {
  return (
    <button onClick={props.clickAction}>
      Login Out
    </button>
  );
}

// 两种招呼组件的封装
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props)
    this.handleLoginClick = this.handleLoginClick.bind(this)
    this.handleLogOutClick = this.handleLogOutClick.bind(this)
    this.state = { isLoggedIn: false }
  }

  handleLoginClick() {
    debugger
    this.setState({ isLoggedIn: true })
  }

  handleLogOutClick() {
    debugger
    this.setState({ isLoggedIn: false })
  }

  render() {
    return (
      <div>
        <Greeting isLoggedIn={this.state.isLoggedIn} />
        <div>
        <Greeting isLoggedIn={this.state.isLoggedIn} />
         // 事件的处理还是卸载内部的，handleLogOutClick等方法
        {this.state.isLoggedIn ?
          <ButtonLoggOut clickAction={this.handleLogOutClick} /> :
          <ButtonLoggin clickAction={this.handleLoginClick} />}
      </div>
      </div>
    )
  }
}

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

点击按钮进行登入登出操作