React 条件渲染2.2

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

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

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={
     false} />,
  document.getElementById('root')
);

通过 isLoggedIn 来判断显示哪一个元素

与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式，因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

function Mailbox(props) {
     
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {
     unreadMessages.length > 0 &&
        <h2>
          You have {
     unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

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

三目运算符

render() {
     
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{
     isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}