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

哟哟耶耶2025-04-11 9:12

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

javascript 复制代码 
 <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
javascript 复制代码 
 <!--  {/* // 引入 PropTypes */} -->
 <script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>
2.2 react脚手架引入
javascript 复制代码 
npm install prop-types
2.3 propTypes验证器声明类型

基本数据类型

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

特殊类型

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

组合类型

javascript 复制代码 
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具体代码例子

指定标签默认属性

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

props传递限制传递数据规则

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

扩展运算符批量传入

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

整体代码

html 复制代码 
<!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 关键字）

javascript 复制代码 
 <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的使用

javascript 复制代码 
 <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>
相关推荐
鹏多多2 分钟前
前端2025年终总结：借着AI做大做强再创辉煌
前端·javascript
哈__5 分钟前
React Native 鸿蒙跨平台开发：Vibration 实现鸿蒙端设备的震动反馈
javascript·react native·react.js
WebGISer_白茶乌龙桃7 分钟前
Cesium实现“悬浮岛”式，三维立体的行政区划
javascript·vue.js·3d·web3·html5·webgl
小Tomkk10 分钟前
⭐️ StarRocks Web 使用介绍与实战指南
前端·ffmpeg
不一样的少年_14 分钟前
产品催： 1 天优化 Vue 官网 SEO？我用这个插件半天搞定（不重构 Nuxt）
前端·javascript·vue.js
-dcr16 分钟前
50.智能体
前端·javascript·人工智能·ai·easyui
行者9625 分钟前
Flutter跨平台开发适配OpenHarmony：进度条组件的深度实践
开发语言·前端·flutter·harmonyos·鸿蒙
云和数据.ChenGuang26 分钟前
Uvicorn 是 **Python 生态中用于运行异步 Web 应用的 ASGI 服务器**
服务器·前端·人工智能·python·机器学习
IT_陈寒28 分钟前
SpringBoot 3.0实战：这5个新特性让你的开发效率提升50%
前端·人工智能·后端
哈__32 分钟前
React Native 鸿蒙跨平台开发：LayoutAnimation 实现鸿蒙端页面切换的淡入淡出过渡动画
javascript·react native·react.js
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定07KGG转MP3工具|非KGM文件|解密音频08【踩坑笔记】50系显卡适配的 PyTorch 安装09Opencode CLI 安装成功,但是启动失败102025-04-03 Latex学习1——本地配置Latex + VScode环境