React条件渲染的几种方式

react中条件渲染三种方式：

1. 使用js运算符if或者条件运算符来表现当前状态，然后让React根据他们来更新UI

if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;

​ 根据传入值渲染时：

const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

2. 可以在运算符中嵌入逻辑与（&&）运算符

   ​ 因为在js中 true && expression 总是返回expression。而false && expression 总是返回false（react会忽略）。

   ⚠️：返回false的表达式会使&&后面的元素被跳过，但会返回false表达式。

   // 当没有阅读的消息条数大于0时，渲染h2标签
   {unreadMessages.length > 0 &&
           <h2>
             You have {unreadMessages.length} unread messages.
           </h2>
         }
   

3. 三目运算符

   可以使用js中的三目运算符： condition ? true : false

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

阻止渲染：

​ 在我们需要隐藏组件时，可以让render方法直接返回null，不进行任何渲染。