• React 入门：组件实例三大属性之props

    文章目录

    props 介绍

    • 从 React 组件内部来讲，组件从概念上类似于 JavaScript 函数，它接受任意的入参，传入的参数就是 props。
    • 从组件外部，也就是调用组件时，React 会将 JSX 所接收的属性以及子组件转换为单个对象传递给组件，这个对象就称之为 props。

    代码准备

    先准备一个基础 html 代码结构：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>函数式组件的props基本使用</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></div>

    <!-- step01: 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- step02: 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- step03: 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    下文的代码片段都可以添加到上面的基础代码中，来运行以验证结果。

    定义支持 props 的组件

    函数式组件的 props

    函数组件接收唯一带有数据的 props 对象，由于函数式组件本质上就是 JavaScript 的函数，所以可以把 props 理解成函数的传入一个对象类型的参数的情况，并把 props 这个唯一参数作为函数组件的属性。
    示例代码：

    <script type="text/babel"> /* 此处一定要写babel */

        // 1. 创建函数式组件
        function Person(props) {
            const {name, age, sex} = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age} 岁</li>
                    <li>性别：{sex}</li>
                </ul>
            )
        }

  </script>

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

    注意：函数式组件定义时，必须显式定义 props 参数（属性）。

    类式组件的 props

    示例代码：

    <script type="text/babel"> /* 此处一定要写babel */

        // 1. 创建类式组件
        class Person extends React.Component {
            render() {
                const {name,sex,age} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                );
            }
        }

</script>

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

    注意：类式组件不是必须显式定义 props 属性。

    渲染（调用）组件

    • 写法一
    <script type="text/babel"> /* 此处一定要写babel */
        // 渲染组件到页面
        const p = { name: 'tom', age: 18, sex: '女'};
        ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />, document.getElementById('app'));

</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 写法二
    <script type="text/babel"> /* 此处一定要写babel */
        // 渲染组件到页面
        const p = { name: 'tom', age: 18, sex: '女'};
        ReactDOM.render(<Person {...p} />, document.getElementById('app'));

</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    渲染原理：React 渲染组件 Person 组件时，把 Person 的三个属性 name、age、sex，转化为单个对象 {name: 'tom', age: 18, sex: '女'} 传给组件，这个是对象就是 Person 组件的 props。

    props 的特点

    • 只读性
      组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
    // 下面这行代码是错误的，
// 运行时控制台会报错：Uncaught TypeError: Cannot assign to read only property 'age' of object
this.props.age = 100;

    • 1
    • 2
    • 3
    • 避免将 props 的值复制给 state。

    限制组件标签属性

    不同的组件标签属性，可能值的类型不同。如果你写的组件，他人使用，可能会输入的值不符合预期。所以我们就需要对组件标签属性的值进行限制。
    比如，我们需要对上面的组件标签属性进行限制如下：

    • 姓名 name：必须为字符串且必传
    • 性别 sex: 必须为字符串，
    • 年龄 age: 必须为数值，
      代码实现如下：
    <!--需要引入 prop-types 类库，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

// 下面的代码就是对标签属性的限制，这端代码要写到标签代码块之外。
Person.propTypes = {
  name: PropTypes.string.isRequired, // 限制name必传，且为字符串
  sex: PropTypes.string, // 限制sex为字符串
  age: PropTypes.number, // 限制age为数字
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    添加上面的代码后，把属性的值设置为不符合限制的值，浏览器控制台就会出现相应的警告类型的错误。

    指定组件标签属性的默认值

    除了对标签属性的限制，可能我们还需要给一些属性提供默认值。
    最常见的比如人的性别，一般都会有默认值，默认“未知”、“保密”或“男”。
    当然某些场景，我们也可以给年龄设置默认值，比如默认 18.
    代码实现如下：

    <!--需要引入 prop-types 类库，用于对组件标签属性设置默认值-->
<script type="text/javascript" src="../js/prop-types.js"></script>

// 下面的代码就是给标签属性的设置默认值，这端代码要写到标签代码块之外。
Person.defaultProps = {
  sex: "未知", // sex默认值为“未知”
  age: 18, // age默认值为18
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    完整代码（props 标准写法）

    以类式组件为例：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>类式组件的props基本使用</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></div>

    <!-- step01: 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- step02: 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- step03: 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- step04: 引入 prop-types，用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */

        // 1. 创建类式组件
        class Person extends React.Component {
            render() {
                const {name,sex,age} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                );
            }
        }

        // 对标签属性进行类型和必填限制
        Person.propTypes = {
            name: PropTypes.string.isRequired, // 限制name必传，且为字符串
            sex: PropTypes.string, // 限制sex为字符串
            age: PropTypes.number // 限制age为数字
        }

        // 给标签属性设置默认值
        Person.defaultProps = {
            sex: '未知', // sex默认值为“未知”
            age: 18 // age默认值为18
        }

        // 渲染组件到页面
        const p = { name: 'Tom', age: 18, sex: '女'};
        // ReactDOM.render(, document.getElementById('app'));
        ReactDOM.render(<Person {...p} />, document.getElementById('app'));
    </script>
</body>

</html>

    • 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

    props 简写方式

    特别说明：函数式组件不支持简写方式。

    上面的完整代码示例，美中不足的是，对组件标签属性的限制写到了组件外部，感觉不是太美观，也不便于维护。所以根据 JavaScript 类的static的特性，来规范简化 props 的编码。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>类式组件的props基本使用</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></div>

    <!-- step01: 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- step02: 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- step03: 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- step04: 引入 prop-types，用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */

        // 1. 创建类式组件
        class Person extends React.Component {

            // 对标签属性进行类型和必填限制
            static propTypes = {
                name: PropTypes.string.isRequired, // 限制name必传，且为字符串
                sex: PropTypes.string, // 限制sex为字符串
                age: PropTypes.number // 限制age为数字
            }

            // 给标签属性设置默认值
            static defaultProps = {
                sex: '未知', // sex默认值为“未知”
                age: 18 // age默认值为18
            }

            render() {
                const {name,sex,age} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                );
            }
        }

        // 渲染组件到页面
        const p = { name: 'Tom', age: 19, sex: '女'};
        // ReactDOM.render(, document.getElementById('app'));
        ReactDOM.render(<Person {...p} />, document.getElementById('app'));
    </script>
</body>

</html>

    • 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

    在 JavaScript 的类中，通过关键字 static 定义的属性，可以通过类名直接访问。
    代码示例：

    class Car {
  static wheel = 4;
}

// 可以如下访问 wheel
console.log(Car.wheel); // 控制台输出：4

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 相关阅读:
    Vue3初体验
    SpringBoot
    java毕业设计游戏社区设计Mybatis+系统+数据库+调试部署
    知识点6--CMS项目管理员后台
    盘点73个Python各行各业管理系统源码Python爱好者不容错过
    Seata学习
    go 使用reids分布式锁
    【深度学习笔记】6_5 RNN的pytorch实现
    【Java】【设计模式】单例模式
    全网最细，Selenium自动化测试项目实战技巧，从0到1精通自动化测试...
  • 原文地址：https://blog.csdn.net/assokoo123/article/details/127456102