条件渲染

Conditional Rendering

• 依据应用的不同状态，你可以只渲染对应状态下的部分内容

• 使用 JavaScript 运算符 if 或者 条件运算符 去创建元素来表现当前的状态

```jsx harmony

function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return } return }

## 元素变量

* 可以使用变量来储存元素，它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变
* 使用 state 和 setState() 来控制

## 与运算符 &&

* 通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式
```jsx harmony

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

• 之所以能这样做，是因为 JavaScript 中，

  • true && expression 总是会返回 expression

  • false && expression 总是会返回 false

三联运算符 condition ? true : false

阻止组件渲染

• 在极少数的情况下，你可能希望能隐藏组件，即使他已经被其他组件渲染，若要完成此操作，你可以让 render 方法 直接返回 null 而不进行任何渲染

• 在组件的 render 方法中使用 null 并不会影响组件的生命周期