条件渲染

发表于 | 分类于

分析

条件渲染在 react 中涉及到状态管理。

用方程的方式构建选择组件：

目标

根据登陆状态显示提示。

步骤分析：
  • 在 <Greeting isLoggedIn={false} /> 中传入 isLoggedIn 参数
  • 用 Greeting() 生成 html 内容
  • ReactDOM.render() 函数渲染提交
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
<!-- 用方程而非类的形式构建组件 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--  引入 react CDN文件和 Babel 编译器 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- 构建容器 -->
    <div id="root"></div>
    <!-- Babel 代码 -->
    <script type="text/babel">
    /* 选择组件 */
    function Greeting(props) {
      const isLoggedIn = props.isLoggedIn;
      if (isLoggedIn) {
        return <h1>Welcome back!</h1>;
      }
      return <h1>Please sign up.</h1>;
    }
    /* 渲染 */
    ReactDOM.render(
      // Try changing to isLoggedIn={true}:
      <Greeting isLoggedIn={false} />,
      document.getElementById('root')
    );
    </script>
  </body>
</html>

用类的方式构建选择组件：

目标

通过传入的性别，显示男士组或女士组的多个图片。

步骤分析：
  • 在 <RenderPicture gender={'woman'} /> 中传入性别
  • 用 RenderPicture 类的 selectPicture() 生成图片地址数组
  • 在 RenderPicture 类的 render() 函数中遍历图片并渲染
代码
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--  引入 react CDN文件和 Babel 编译器 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- 构建容器 -->
    <div id="example"></div>
    <!-- Babel 代码 -->
    <script type="text/babel">
    /* 构建组件 */
    class RenderPicture extends React.Component {
      state = {
        gender: this.props.gender,
      };
      // 通过函数来生成图片地址数组
      selectPicture(){
        if (this.state.gender === 'woman') {
          return [
            'images/img_avatar4.png',
            'images/img_avatar5.png',
            'images/img_avatar6.png'
          ];
        } else {
          return [
            'images/img_avatar1.png',
            'images/img_avatar2.png',
            'images/img_avatar3.png'
          ];
        }
      };
      // 将储存多个图片地址的数组放在类中
      // ReactDOM.render 中输入性别选项
      // return 函数里至少有一个 html 标签容器
      render() {
        return (
          <div>
            {
              this.selectPicture().map((img)=> (
                <img
                  key={img}
                  src={img}
                  style={{ width: 128}}
                />
              ))
            }
          </div>
        )
      }
    };
    /* 将组件的渲染结果放入容器 */
    ReactDOM.render(
      <RenderPicture gender={'woman'} />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>
其他示例

与运算符 && 、三目运算符、阻止组件渲染以及 prevState 的应用详见React 条件渲染。