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>
相关推荐
web打印社区2 分钟前
web-print-pdf：突破浏览器限制，实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO22 分钟前
前端编程 课程十三、：CSS核心基础1：CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
烬头88211 小时前
React Native鸿蒙跨平台采用了函数式组件的形式，通过 props 接收分类数据，使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos
Amumu121381 小时前
Vuex介绍
前端·javascript·vue.js
We་ct1 小时前
LeetCode 54. 螺旋矩阵：两种解法吃透顺时针遍历逻辑
前端·算法·leetcode·矩阵·typescript
2601_949809591 小时前
flutter_for_openharmony家庭相册app实战+相册详情实现
javascript·flutter·ajax
qq_177767371 小时前
React Native鸿蒙跨平台通过Animated.Value.interpolate实现滚动距离到动画属性的映射
javascript·react native·react.js·harmonyos
2601_949833391 小时前
flutter_for_openharmony口腔护理app实战+饮食记录实现
android·javascript·flutter
2601_949480061 小时前
【无标题】
开发语言·前端·javascript
css趣多多1 小时前
Vue过滤器
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Clawdbot 中文汉化版 接入微信、飞书032026美赛A题智能手机电池续航时间预测的连续时间数学模型04OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)052025 年大语言模型发展回顾：关键突破、意外转折与 2026 年展望06【Milvus】向量数据库pymilvus使用教程072026数学建模美赛题目特点与选题建议，常用四大模型汇总08Claude Code Skills 实用使用手册09一种新的LCA算法10Linux下V2Ray安装配置指南