React 学习-5-条件渲染

React 条件渲染: 与js中的写法一致

注意：在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

1. if 或条件运算符来创建表示当前状态的元素
示例一：
 if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
  } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
  }
2. 在JSX中嵌入表达式使用花括号{}
示例一：
function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          您有 {unreadMessages.length} 条未读信息。
        </h2>
      }
    </div>
  );
}
3.三目运算符 condition ? true : false。
4.阻止组件渲染  结合变量的boolean值和if进行判断
示例一：
function WarningBanner(props) {
  if (!props.warn) {//warn为存储在state中的可变变量
    return null;
  }
 
  return (
    <div className="warning">
      警告!
    </div>
  );
}