React——conditional render

条件渲染一：element variable

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

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

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

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

class GreetingControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.state = {
      isLoggedIn: false
    };
  }
  
  handleLogin() {
    this.setState({
      isLoggedIn: true
    });
  }
    
  handleLogout() {
    this.setState({
      isLoggedIn: false
    })
  }
  
  render() {
    const isLoggedIn = this.state.isLoggedIn; // 一：element variable
    let button; 
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogout} />;
    } else {
      button = <LoginButton onClick={this.handleLogin} />;
    }
    // button = (!isLoggedIn) ? (<LoginButton onClick={this.handleLogin} />) : (<LogoutButton onClick={this.handleLogout} />);
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

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

条件渲染二：Inline If with Logical && Operator

class MailBox extends React.Component {
  render() {
    const unreadMessages = this.props.unreadMessages;
    return (
      <div>
        <h1>Hello</h1>
        // 二：Inline If with Logical && Operator
        {unreadMessages.length > 0 && 
          <h1>You have {unreadMessages.length} messages to read.</h1>
        }
      </div>
    );
  }
}

const unreadMessages = ['React', 'Re: React', 'Re: Re: React'];
ReactDOM.render(
  <MailBox unreadMessages={unreadMessages} />,
  document.getElementById('root')
);