react组件实例三大核心属性之props

最新推荐文章于 2024-10-06 13:30:57 发布
最新推荐文章于 2024-10-06 13:30:57 发布
阅读量374 收藏 1
点赞数 1
分类专栏： react笔记 文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51219425/article/details/123332268
版权
本文详细介绍了React组件中的props属性，包括其基本使用、类型限制、默认值设置以及简写方式。通过实例展示了如何在组件中接收和使用props，并利用prop-types库进行属性验证和设置默认值。此外，还提到了使用展开运算符来传递对象属性的便捷方法。
摘要由CSDN通过智能技术生成

三大核心属性分别是：state、props、refs

props属性

  1. 每个组件对象都会有props(properties的简写)属性

  2. 组件标签的所有属性都保存在props中

基本使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>1_props的基本使用</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>

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

    <script type="text/babel">   //<!--此处一定要写babel-->
       //创建组件
        class Person extends React.Component{
            render(){
                const {name,age,gender} = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Person name="sandy" age="18" gender="女"/>,document.getElementById('test'))
    </script>
    </body>
    </html>

三点运算符"…"的使用：（注意，展开运算符不能展开对象）
在这里插入图片描述

在进行下面操作前，特别注意需要添加prop-types.js依赖包：（依赖包下载链接我放文章最下面了）
在这里插入图片描述

对标签属性进行类型、必要性的限制，以及设置默认值：
在这里插入图片描述

优化功能后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>1_props的基本使用</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test1"></div>
    <div id="test2"></div>

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

    <script type="text/babel">   //<!--此处一定要写babel-->
       //创建组件
        class Person extends React.Component{
            render(){
                const {name,age,gender} = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }
        //对标签属性进行类型、必要性的限制
        Person.propTypes={
            name:React.PropTypes.string.isRequired,     //name指定为字符串类型，而且必须得填，不能为空
            gender:React.PropTypes.string,
            age:React.PropTypes.number,
            speak:React.PropTypes.func       //限制speak为函数
        }
        Person.defaultProps = {         //如果gender或者age值为空，就使用默认值
            gender:'男',
            age:18
        }
        //渲染组件到页面
        ReactDOM.render(<Person name="sandy" age={18} gender="女" speak={speak}/>,document.getElementById('test1'))
        const p={name:'小唐',age:18,gender:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))

        function speak(){
            console.log('happy');
        }
    </script>
    </body>
    </html>

props的简写方式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>2_props的简写方式</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test1"></div>
    <div id="test2"></div>

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

    <script type="text/babel">   //<!--此处一定要写babel-->
       //创建组件
        class Person extends React.Component{
        //对标签属性进行类型、必要性的限制
        static propTypes={
            name:PropTypes.string.isRequired,     //name指定为字符串类型，而且必须得填，不能为空
            gender:PropTypes.string,
            age:PropTypes.number,
            speak:PropTypes.func,       //限制speak为函数
        }
        static defaultProps = {         //如果gender或者age值为空，就使用默认值
            gender:'男',
            age:18
        }
            render(){
                const {name,age,gender} = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }
        
        //渲染组件到页面
        ReactDOM.render(<Person name="sandy" age={18} gender="女" speak={speak}/>,document.getElementById('test1'))
        const p={name:'小唐',age:18,gender:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))

        function speak(){
            console.log('happy');
        }
    </script>
    </body>
    </html>

所需相关js依赖包：
链接：https://pan.baidu.com/s/1LWFLfp0OnAZ7tpFZXBep5A
提取码：kA77
（本知识点所需js依赖包库在文件夹“03_依赖包”中的“旧版本”里面）

冰淇淋配马卡龙
关注
专栏目录
【React】2、面向组件编程——组件实例的三大核心属性state、props和refs超详解
Coding and studying
05-24 1301
React面向组件编程 文章目录React面向组件编程一、使用 React 开发者工具调试二、基本理解和使用2.1 函数式组件（适用于简单组件<无状态组件>的定义）2.2 类式组件（适用于复杂组件<有状态组件>的定义）三、组件实例的三大核心属性1、状态（state）理解强烈注意示例效果state 标准写法state 简写2、props理解作用编码操作示例效果在类式组件中使用props在类式组件中使用props-简写在函数式组件中使用props3、refs理解示例效果字符串形式的ref
【React系列】父子组件通信—props属性传值
川峰的博客
01-02 1377
AppMainAppHeaderHeaderHeaderMainBanner总之，在一个React项目中，组件之间的通信是非常重要的环节；props。
2、Reactjs中的属性（this.props）
大前端程序猿
01-17 2万+
一、什么是属性 React官方文档上对于属性的介绍如下： React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。 React中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象 二、属性的使用方法
react 中...this.props含义
m0_52364694的博客
11-01 479
这其实是react提供的语法糖，可以将父组件得所有属性传递给子组件。 例如， <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>...this.props</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script&
react-{this.props}的解释
want_to_fly_的博客
07-23 1429
react-{this.props}传递参数 基于react环境 {…this.props}是props所提供的语法糖，可以将父组件的所有属性复制给子组件（按照我的通俗理解来说，这就是另类的继承） App,js 子组件 import React, { Component } from 'react' class Text extends Component{ constructor(){ super() } render(){ const {na
{...this.props}是什么意思
otatoz
07-11 2万+
在react中，会看到{...this.props}的代码，不知道是什么意思，现在记录一下。 {...this.props}是props所提供的语法糖，可以将父组件的所有属性复制给子组件 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>.....
组件的props到底是什么
weixin_40847663的博客
12-04 2817
组件的props到底是什么？ 含义：当React 元素为用户提供自定义组件的时候，它会将JSX所接受的属性转化为单个对象，传递给组件，这个组件就是“props” function CCCC(){ return <h1>hello ,{props.bbb}</h1> } const element =<CCCC bbb='是他是他就是他' /> ReactDOM...
React 入门：组件实例三大属性之props
将PHP Web开发进行到底
10-22 760
组件的 props，类似于 JavaScript 函数的参数。组件标签以属性的形式接收的参数即 “props”，并返回用于描述页面展示内容的 React 元素。
React之组件实例的三大属性之props
学习笔记
08-09 475
为了防止react太笨重，就将限制类型的模块单独抽了出来，方便选择是否使用，需要使用导入即可。通过标签属性从组件外向组件内传递变化的数据，组件内不能够修改props数据。每个组件对象都会有props(properties的简写)属性。做一个能够展示姓名、学号、性别的列表组件，并且能够设置默认值。会警告数据类型错误，达到限制数据类型的提示。组件标签的所有属性都保存在props中。//对标签属性进行类型、必要性的限制。//限制name必传，且为字符串。//props只读不能改。//指定模标签属性值。...
React：组件实例三大属性之(props)
Continue的博客
06-27 430
????个人理解，如有不对，欢迎讨论 文章目录概述基本使用传入类型限制默认值写入类组件内部函数组件使用props 概述 react组件实例中共有三大属性，分别为state、props、refs。其中props，是properties的简写，字面意思为“属性”，在组件上绑定的属性都在props里。 作用： 通过标签属性从组件外向组件内传递变化的数据 注意： props属性是只读的，也就是不能修改，只能读取 基本使用 <!-- 创建容器标签 --> <div id="root
react 动态添加组件属性_「React 基础」关于组件属性（props）与状态（state）的入门介绍...
weixin_42552124的博客
02-11 1317
大家好，在上一篇文章里，我们一起学习了如何创建第一个 React 组件，我相信通过上一篇文章的学习我们已经基本熟悉了什么是 React 组件，但是还有更多关于组件的内容值得我们去深入学习。本篇文章，我将和大家一起复习下如何使用组件的属性(props)与状态(state)。如何使用组件的属性(props)和其它应用程序一样，组件应具备重用性。接下来我们将基于上一节的例子，分别创建以下组件：头部组件(...
什么是React.FC| 组件接受属性props有什么用 | ant design 封装独立弹框组件之-修改密码弹框组件
西京刀客
01-04 1638
React提供了一个组件类型React.FunctionComponent，可简写React.FC。
关于Vue中props的详解
热门推荐
jingtian678的博客
07-23 13万+
看一下官方文档： 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。 也就是props是子组件访问父组件数据的唯一接口。 详细一点解释就是： 一个组件可以直接在模板里面渲染data里面的数据（双大括号）。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的数据，那么就在...
react中props详解
white-hang的博客
12-27 7452
本文主要介绍了react中的props详细的使用方法
React 对组件props限制 （ prop-types 依赖）
Mr_Piemon的博客
04-14 1723
在 React 项目中对组件参数限制。 下载 PropTypes 依赖包 yarn add prop-types 或 npm i prop-types 在模块中引入并使用 import PropTypes from 'prop-types' 在类组件中 推荐写法 ( 代码块统一 ) import React from "react"; import PropTypes from 'prop-types'; // 引入依赖 class Comp extends React.Component {
【Spring Boot & React】Spring Boot和React教程 完整版
ccf19881030的专栏
10-05 625
在B站找到一个不错的SpringBoot和React的学习视频，作者是。值得仔细学习一下，特此记录。
React18新特性
最新发布
警警的博客
10-06 822
同时，需要注意的是，React 18的并发特性和新Hooks是基于Fiber架构实现的，它们共同构成了React 18中强大的渲染和控制能力。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。
【React】入门Day04 —— 项目搭建及登录与表单校验、token 管理、路由鉴权实现
2303_76696898的博客
10-04 1263
本文详细介绍了一个 React 项目的搭建过程以及登录模块、Layout 模块等功能模块的实现方式，包括项目结构调整、使用的技术（如 scss 预处理器、antd 组件库、react-router-dom 等）以及各个模块中涉及的关键知识点（如表单校验、token 管理、路由鉴权等），并为每个知识点提供了示例代码。
React组件编程精讲：基本使用、核心属性与事件处理
React组件的三大核心属性包括state（状态）、props（属性）和refs（引用）。state是组件的私有数据，用于控制组件的行为和渲染；props是父组件传递给子组件的参数，它们是只读的，子组件不能修改传递给它的props；...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值