> For the complete documentation index, see [llms.txt](https://zg-zhang.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zg-zhang.gitbook.io/note/react/offical-website/main-concepts/conditional-rendering.md).

# 条件渲染

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 并不会影响组件的生命周期