### 彪哥

爱好前端

- 核心概念

  - JSX简介
  - 元素渲染
  - 组件&Props
  - State&生命周期
  - 事件处理
  - 条件渲染
    - 元素变量
    - 与运算符 &&
    - 三目运算符
    - 阻止组件渲染
  - 列表&Key
  - 表单
  - 状态提升 (共享状态)
  - 组合vs继承
  - React哲学

- 高级指引

- Hook

- 案例演示

- 《React》笔记
- 核心概念

heBody
2021-03-24
目录

# 条件渲染

# # 06. 条件渲染

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 `if`
(opens new window) 或者条件运算符
(opens new window)去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

观察这两个组件:

    function UserGreeting(props) {
      return <h1>Welcome back!</h1>;
    }

    function GuestGreeting(props) {
      return <h1>Please sign up.</h1>;
    }

1
2
3
4
5
6
7

再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。

    function Greeting(props) {
      const isLoggedIn = props.isLoggedIn;

      // 根据条件来渲染组件(UI)
      if (isLoggedIn) {
        return <UserGreeting />;
      }
      return <GuestGreeting />;
    }

    ReactDOM.render(
      // Try changing to isLoggedIn={true}:
      <Greeting isLoggedIn={false} />,
      document.getElementById('root')
    );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

## # 元素变量

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

    class LoginControl extends React.Component {
      constructor(props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state = {isLoggedIn: false};
      }

      handleLoginClick() {
        this.setState({isLoggedIn: true});
      }

      handleLogoutClick() {
        this.setState({isLoggedIn: false});
      }

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

        return (
          <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
          </div>
        );
      }
    }

    ReactDOM.render(
      <LoginControl />,
      document.getElementById('root')
    );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在 CodePen 上尝试
(opens new window)

> 此方式有些复杂~

## # 与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入表达式
(opens new window)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染：

    function Mailbox(props){
      const unreadMeg = props.unreadMeg
      return (
      	<div>
        	{
            unreadMeg.length &&
              <h2>You have {unreadMeg.length} unread messages</h2>
          }
        </div>
      )
    }

    const meg = ['1','22','33']
    ReactDOM.render(
    	<Mailbox unreadMeg={meg} />,
      document.getElementById('root')
    )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

请注意，返回 false 的表达式会使 `&&` 后面的元素被跳过，但会返回 false 表达式。在下面示例中，render 方法的返回值是 `<div>0</div>`。

    render() {
      const count = 0;
      return (
        <div>
          // 这里会渲染count的值
          { count && <h1>Messages: {count}</h1>}
        </div>
      );
    }

1
2
3
4
5
6
7
8
9

## # 三目运算符

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

1
2
3
4
5
6
7
8

    render() {
      const isLoggedIn = this.state.isLoggedIn;
      return (
        <div>
          {isLoggedIn
            ? <LogoutButton onClick={this.handleLogoutClick} />
            : <LoginButton onClick={this.handleLoginClick} />
          }
        </div>
      );
    }

1
2
3
4
5
6
7
8
9
10
11

> 可通过三目运算符来条件渲染相应组件。

## # 阻止组件渲染

通过让 `render` 方法直接返回 `null`阻止渲染：

    function WarningBanner(props) {
      if (!props.warn) {
        // 返回null则不渲染此组件
        return null;
      }
      return (
        <div className="warning">
          Warning!
        </div>
      );
    }

    class Page extends React.Component {
      constructor(props) {
        super(props);
        this.state = {showWarning: true};
        this.handleToggleClick = this.handleToggleClick.bind(this);
      }

      handleToggleClick() {
        this.setState(state => ({
          showWarning: !state.showWarning
        }));
      }

      render() {
        return (
          <div>
            <WarningBanner warn={this.state.showWarning} />
            <button onClick={this.handleToggleClick}>
              {this.state.showWarning ? 'Hide' : 'Show'}
            </button>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Page />,
      document.getElementById('root')
    );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

编辑
(opens new window)
#React
上次更新: 2022/12/14, 19:36:42
事件处理
列表&Key

← 事件处理 列表&Key→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式