当前位置：首页 > news >正文

React-05React中props属性（传递数据），propTypes校验，类式与函数式组件props的使用

news 来源：原创 2025/6/17 13:51:43

1.类式组件props基本数据读取与解构运算符传递

 <script type="text/babel">
        //  创建组件
        class PersonalInfo extends React.Component {
            render() {
                // 读取props属性 并读取值
                console.log('props',this.props);
                return(
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.gender}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                ) 
            }
        }
        // 渲染组件
        const p ={name:'岂不闻',gender:'男',age:'24'}
        // 展开运算符  解构赋值 babel+react 解构运算符 仅使用与标签中数据传递
        ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))
        ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))
    </script>

2.类式组件propTypes校验props传递数据规则

propTypes是react提供的一种工具，对于组件的props进行类型检查

2.1 html引入prop-types.js

 <!--  {/* // 引入 PropTypes */} -->
 <script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>

2.2 react脚手架引入

npm install prop-types

2.3 propTypes验证器声明类型

基本数据类型

PropTypes.string：字符串
PropTypes.number：数字
PropTypes.boolean：布尔值
PropTypes.object：对象
PropTypes.array：数组
PropTypes.func：函数
PropTypes.symbol：Symbol

特殊类型

PropTypes.node：任何可以被渲染的内容：数字、字符串、元素或数组（包括这些类型）
PropTypes.element：React元素
PropTypes.instanceOf(Class)：某个类的实例

组合类型

PropTypes.oneOf(['option1', 'option2'])：枚举类型，值必须是所提供选项之一
PropTypes.oneOfType([PropTypes.string, PropTypes.number])：多个类型中的一个
PropTypes.arrayOf(PropTypes.number)：某种类型组成的数组
PropTypes.objectOf(PropTypes.number)：某种类型组成的对象
PropTypes.shape({ key: PropTypes.string, value: PropTypes.number })：具有特定形状的对象

2.4具体代码例子

指定标签默认属性

        // 指定标签默认属性
        PersonalInfo.defaultProps = {
            name: '未知',
            gender: '未知',
            age: 0
        }

props传递限制传递数据规则

 PersonalInfo.propTypes = {
            // 限定为字符串类型 必填项
            name: PropTypes.string.isRequired,
            gender: PropTypes.string.isRequired,
            age: PropTypes.number.isRequired
        }

扩展运算符批量传入

        // 渲染组件
        const p ={name:'岂不闻',gender:'男',age:'24'}
        // 展开运算符  解构赋值 babel+react 解构运算符 仅使用与标签中数据传递
        ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))

整体代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test1"></div>
    <!-- 容器 -->
    <div id="test2"></div>
    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!--  {/* // 引入 PropTypes */} -->
    <script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>
    <script type="text/babel">
        //  创建组件
        class PersonalInfo extends React.Component {
            render() {
                // 读取props属性 并读取值
                console.log('props',this.props);
                const {name,gender,age} = this.props;
                return(
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                ) 
            }
        }
        // 指定标签默认属性
        PersonalInfo.defaultProps = {
            name: '未知',
            gender: '未知',
            age: 0
        }
        // props传递限制传递数据规则
        PersonalInfo.propTypes = {
            // 限定为字符串类型 必填项
            name: PropTypes.string.isRequired,
            gender: PropTypes.string.isRequired,
            age: PropTypes.number.isRequired
        }

        // 渲染组件
        const p ={name:'岂不闻',gender:'男',age:'24'}
        // 展开运算符  解构赋值 babel+react 解构运算符 仅使用与标签中数据传递
        ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))
        ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))

    </script>
</body>

</html>

3.类式组件props的简写方式（static 关键字）

 <script type="text/babel">
        // 创建组件
        class PersonalInfo extends React.Component {
            // 指定标签默认属性
            static defaultProps = {
                name: '未知',
                gender: '未知',
                age: 0
            }
            // props传递限制传递数据规则
            static propTypes = {
                // 限定为字符串类型 必填项
                name: PropTypes.string.isRequired,
                gender: PropTypes.string.isRequired,
                age: PropTypes.number.isRequired
            }
            
            render() {
                // 读取props属性 并读取值
                console.log('props',this.props);
                const {name,gender,age} = this.props;
                return(
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                ) 
            }
        }
        
        // 渲染组件
        const p ={name:'岂不闻',gender:'男',age:'24'}
        // 展开运算符  解构赋值 babel+react 解构运算符 仅使用与标签中数据传递
        ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))
        ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))

    </script>

4.函数式组件props的使用

 <script type="text/babel">
        // 指定标签默认属性
        PersonalInfo.defaultProps = {
                name: '未知',
                gender: '未知',
                age: 0
            }
        //  props传递限制传递数据规则
        PersonalInfo.propTypes = {
            // 限定为字符串类型 必填项
            name: PropTypes.string.isRequired,
            gender: PropTypes.string.isRequired,
            age: PropTypes.number.isRequired
        }

        // 函数式组件
        function PersonalInfo(props){
            // 解构赋值
            const {name,gender,age} = props;
            return(
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                ) 
        }

        // 组件渲染
        ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))

    </script>