条件渲染

条件渲染
- 元素变量
- 与运算符 &&
- 三目运算符
- 阻止组件渲染

条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。
React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
观察这两个组件:
1. function UserGreeting(props) {
2. return

Welcome back!

;
3. }
4. 5. function GuestGreeting(props) {
6. return

Please sign up.

;
7. }

再创建一个 Greeting 组件，它会根据用户是否登录来决定显示上面的哪一个组件。
1. function Greeting(props) {
2. const isLoggedIn = props.isLoggedIn;
3. if (isLoggedIn) { return ; } return ;}
4. ReactDOM.render(
5. // Try changing to isLoggedIn={true}:
6. , document.getElementById('root'));

在 CodePen 上尝试
这个示例根据 isLoggedIn 的值来渲染不同的问候语。

元素变量

你可以使用变量来储存元素。它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。
观察这两个组件，它们分别代表了注销和登录按钮：
1. function LoginButton(props) {
2. return (
3.
6. );
7. }
8. 9. function LogoutButton(props) {
10. return (
11.
14. );
15. }

在下面的示例中，我们将创建一个名叫 LoginControl 的有状态的组件。
它将根据当前的状态来渲染 <LoginButton /> 或者 <LogoutButton />。同时它还会渲染上一个示例中的 <Greeting />。
1. class LoginControl extends React.Component {
2. constructor(props) {
3. super(props);
4. this.handleLoginClick = this.handleLoginClick.bind(this);
5. this.handleLogoutClick = this.handleLogoutClick.bind(this);
6. this.state = {isLoggedIn: false};
7. }
8. 9. handleLoginClick() {
10. this.setState({isLoggedIn: true});
11. }
12. 13. handleLogoutClick() {
14. this.setState({isLoggedIn: false});
15. }
16. 17. render() {
18. const isLoggedIn = this.state.isLoggedIn;
19. let button;
20. if (isLoggedIn) { button = ; } else { button = ; }
21. return (
22.

23. {button}

24. );
25. }
26. }
27. 28. ReactDOM.render(
29. ,
30. document.getElementById('root')
31. );

在 CodePen 上尝试
声明一个变量并使用 if 语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。

与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染：
1. function Mailbox(props) {
2. const unreadMessages = props.unreadMessages;
3. return (
4.

Hello!

6. {unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}

7. );
8. }
9. 10. const messages = ['React', 'Re: React', 'Re:Re: React'];
11. ReactDOM.render(
12. ,
13. document.getElementById('root')
14. );

在 CodePen 上尝试
之所以能这样做，是因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
请注意，返回 false 的表达式会使 && 后面的元素被跳过，但会返回 false 表达式。在下面示例中，render 方法的返回值是 <div>0</div>。
1. render() {
2. const count = 0; return (
3.

4. { count &&

Messages: {count}

}

5. );
6. }

三目运算符

另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。
在下面这个示例中，我们用它来条件渲染一小段文本
1. render() {
2. const isLoggedIn = this.state.isLoggedIn;
3. return (
4.

5. The user is {isLoggedIn ? 'currently' : 'not'} logged in.

6. );
7. }

同样的，它也可以用于较为复杂的表达式中，虽然看起来不是很直观：
1. render() {
2. const isLoggedIn = this.state.isLoggedIn;
3. return (
4.

5. {isLoggedIn ?
6. : }
7.

);
8. }

就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何提取组件。

阻止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。
下面的示例中，<WarningBanner /> 会根据 prop 中 warn 的值来进行条件渲染。如果 warn 的值是 false，那么组件则不会渲染:
1. function WarningBanner(props) {
2. if (!props.warn) { return null; }
3. return (
4.

5. Warning!
6.

7. );
8. }
9. 10. class Page extends React.Component {
11. constructor(props) {
12. super(props);
13. this.state = {showWarning: true};
14. this.handleToggleClick = this.handleToggleClick.bind(this);
15. }
16. 17. handleToggleClick() {
18. this.setState(state => ({
19. showWarning: !state.showWarning
20. }));
21. }
22. 23. render() {
24. return (
25.

26.
29.

30. );
31. }
32. }
33. 34. ReactDOM.render(
35. ,
36. document.getElementById('root')
37. );

在 CodePen 上尝试
在组件的 render 方法中返回 null 并不会影响组件的生命周期。例如，上面这个示例中，componentDidUpdate 依然会被调用。

7. 条件渲染