【05】基础知识：React组件实例三大核心属性 - props

一、props 了解

理解

1、每个组件对象都会有 props（properties的简写）属性

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

作用

通过标签属性从组件外向组件内传递变化的数据

注意

组件内部不要修改 props 数据

二、案例

需求：自定义用来显示一个人员信息的组件

姓名必须指定，且为字符串类型；

性别为字符串类型，如果性别没有指定，默认为男

年龄为字符串类型，默认为18

1、基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>props基本使用</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></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">// 1、创建组件class Person extends React.Component {// state是在组件内部定义数据，通过 this.state.xxx 访问// state = { name: 'jerry', sex: '男', age: '19' }render() {console.log(this) // Person组件的实例对象// 通过Person组件实例的props属性接收外部传入数据const { name, sex, age } = this.propsreturn (<ul><li>姓名：{ name }</li><li>性别：{ sex }</li><li>年龄：{ age }</li></ul>)}}// 2、渲染组件到页面ReactDOM.render(<Person name="jerry" sex="男" age={19}/>, document.getElementById('test1'))ReactDOM.render(<Person name="tom" sex="女" age={18}/>, document.getElementById('test2'))// 模拟api返回数据处理（批量传递属性）const p = { name: '老刘', sex: '女', age: 18 }// ReactDOM.render(<Person name={p.name} sex={p.sex} age={p.age}/>, document.getElementById('test3'))// 简写 （返回数据p中的数据项(name、sex、age...)必须存在，否则取不到值）ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))/* ... 展开运算符 */// <Person {...p}/> 中的 {} 代表要在此处写js表达式，并不是字面量对象// ... 不能遍历对象，babel+react 允许使用 ... 遍历对象，仅适用于标签属性传递console.log('展开运算符', ...p)</script>
</body>
</html>

2、对 props 进行限制

React 中使用 propTypes 对标签属性进行类型、必要性的限制

React.PropTypes 形式 React v15.5 开始已弃用

React v15.5 及以后版本以后引入 prop-types 库，对组件标签属性进行限制

React 中使用 defaultProps 指定默认标签属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对props进行限制</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></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，用于对组件标签属性进行限制，全局有PropTypes对象 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">class Person extends React.Component {render () {const { name, sex, age } = this.props// this.props.speak() // 执行传入方法// props是只读的// this.props.name = 'jack' // 此行代码会报错，因为props是只读的return (<ul><li>姓名：{ name }</li><li>性别：{ sex }</li><li>年龄：{ age + 1 }</li></ul>)}}// 伪代码Person.属性规则 = {name: '必传，字符串',sex: '非必传，字符串，默认男',age: '非必传，数字，默认18'}// React 中使用 propTypes 对标签属性进行类型、必要性的限制Person.propTypes = {// name: React.PropTypes.string.isRequired, // React v15.5 开始已弃用name: PropTypes.string.isRequired, // 限制name必传，且为字符串sex: PropTypes.string, // 限制sex为字符串age: PropTypes.number, // 限制age为数字speak: PropTypes.func // 限制speak为函数（function会和关键字冲突，改为使用func）}// React 中使用 defaultProps 指定默认标签属性值Person.defaultProps = {sex: '男', // sex默认值为男age: 18 // age默认值为18}ReactDOM.render(<Person name="jerry" speak={speak}/>, document.getElementById('test1'))ReactDOM.render(<Person name="tom" sex="女" age={18} speak={speak}/>, document.getElementById('test2'))// 给实例传入方法，限制传入方法必须为函数function speak() {console.log('我说话了')}</script>
</body>
</html>

3、props 的简写方式

使用 static 关键字，给类自身添加属性；将 propTypes、defaultProps 写在类中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对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><!-- 引入prop-types，用于对组件标签属性进行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">class Person extends React.Component {constructor(props) {// 构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props// console.log(props)super(props)console.log('constructor', this.props)}/* 简化写法：使用static关键字，给类自身添加属性 */// 对标签属性进行类型、必要性的限制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.propsreturn (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age + 1}</li></ul>)}}ReactDOM.render(<Person name="jerry" />, document.getElementById('test'))</script>
</body>
</html>

4、函数组件使用 props

函数式组件，可以通过接收参数形式使用 props；props 会收集所有传递的标签属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对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><!-- 引入prop-types，用于对组件标签属性进行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">function Person(props) {const { name, age, sex } = propsreturn (<ul><li>姓名：{ name }</li><li>性别：{ sex }</li><li>年龄：{ age }</li></ul>)}// React 中使用 propTypes 对标签属性进行类型、必要性的限制Person.propTypes = {name: PropTypes.string.isRequired, // 限制name必传，且为字符串sex: PropTypes.string, // 限制sex为字符串age: PropTypes.number, // 限制age为数字}// React 中使用 defaultProps 指定标签默认属性值Person.defaultProps = {sex: '男', // sex默认值为男age: 18 // age默认值为18}ReactDOM.render(<Person name="jerry" />, document.getElementById('test'))</script>
</body>
</html>

三、展开运算符了解

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>Document</title>
</head><body><script type="text/javascript">let arr1 = [1, 3, 5, 7, 9]/* 1、展开一个数组 */console.log(...arr1) // 1 3 5 7 9/* 2、连接数组 */let arr2 = [2, 4, 6, 8, 10]let arr3 = [...arr1, ...arr2]console.log(arr3) // [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]/* 3、不定参数（在函数中使用） */function sum(...numbers) {return numbers.reduce((preValue, currentValue) => {return preValue + currentValue})}console.log(sum(1, 2, 3, 4)) // 10/* 4、构造字面量对象时使用展开语法 */let person = { name: 'tom', age: 18 }// 4.1、深拷贝一层let person2 = { ...person } person.name = 'jerry'console.log(person) // {name: 'jerry', age: 18}console.log(person2) // {name: 'tom', age: 18}// console.log(...person) // 报错，展开运算符不能展开对象// 4.2、合并let person3 = { ...person, name: 'jack', address: '地球' }console.log(person3) // {name: 'jack', age: 18, address: '地球'}</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/107508.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法通关村第一关|青铜|链表笔记

算法通关村第一关|青铜|链表笔记

1.理解 Java 如何构造出链表 在 Java 中&#xff0c;我们创建一个链表类&#xff0c;类中应当有两个属性&#xff0c;一个是结点的值 val &#xff0c;一个是该结点指向的下一个结点 next 。 next 通俗讲是一个链表中的指针&#xff0c;但是在链表类中是一个链表类型的引用变量…
阅读更多...
【数据结构】链表

【数据结构】链表

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈数据结构 &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 链表 1. ArrayList的缺陷2. 链表2.1…
阅读更多...
异步使用langchain

异步使用langchain

文章目录 一.先利用langchain官方文档的AI功能问问二.langchain async api三.串行&#xff0c;异步速度比较 一.先利用langchain官方文档的AI功能问问 然后看他给的 Verified Sources 这个页面里面虽然有些函数是异步函数&#xff0c;但是并非专门讲解异步的 二.langchain asy…
阅读更多...
大模型引发“暴力计算”，巨头加速推进液冷“降温”

大模型引发“暴力计算”，巨头加速推进液冷“降温”

点击关注 文&#xff5c;姚悦 编&#xff5c;王一粟 一进入部署了液冷服务器的数据中心&#xff0c;不仅没有嘈杂的风扇声&#xff0c;甚至在不开空调的夏日也完全没有闷热感。 在大模型引发“暴力计算”的热潮下&#xff0c;数据中心的上下游&#xff0c;正在加紧推进液冷“…
阅读更多...
【跳槽必备】2023常用手写面试题知识点总结

【跳槽必备】2023常用手写面试题知识点总结

前言 想想几年前一个月随便投出去一天至少3面试一个月排满面试的场景对于现在已经灭绝了&#xff0c;基本只有外包和驻场有回应&#xff0c;今年很多人都只能猥琐发育&#xff0c;市场上不仅岗位变少&#xff0c;money也少了很多。目前环境的不景气&#xff0c;面试难度也增加…
阅读更多...
特种设备怎么运输到国外

特种设备怎么运输到国外

特种设备的运输需要考虑多个因素&#xff0c;包括设备的尺寸、重量、敏感度等。以下是一些常用的运输方式&#xff1a; 海运&#xff1a;海运是运输特种设备的主要方式之一&#xff0c;通常采用货运集装箱进行装载。在运输前需要进行妥善包装和固定&#xff0c;以保证设备的安全…
阅读更多...
二十六、【颜色调整】

二十六、【颜色调整】

文章目录 1、色相/饱和度2、色彩平衡3、曲线4、可选颜色 1、色相/饱和度 色相其实就是颜色的亮度&#xff0c;就是我们往颜色里边加白色&#xff0c;白色越多颜色越淡。饱和度就是我们往颜色里边加黑色&#xff0c;黑色越多颜色越浓。如下图&#xff0c;我们调整拾色器里边的颜…
阅读更多...
2.1 初探大数据

2.1 初探大数据

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;什么是大数据&#xff08;二&#xff09;大数据的特征1、Volume - 数据量大2、Variety - 数据多样3、Velocity - 数据增速快4、Value - 数据价值低5、Veracity - 数据真实性 &#xff08;三&#xff0…
阅读更多...
互联网摸鱼日报(2023-10-11)

互联网摸鱼日报(2023-10-11)

互联网摸鱼日报(2023-10-11) 36氪新闻 走向平衡&#xff1a;生成式AI的开源与专有模型之争 麦当劳和可乐们最大的威胁&#xff0c;居然是“减肥药” 束从轩5000万“宴请全国”&#xff0c;老乡鸡会去港股吗&#xff1f; 威马汽车回应破产重整 特斯拉电动皮卡&#xff0c;还…
阅读更多...
RabbitMQ消息中间件概述

RabbitMQ消息中间件概述

1.什么是RabbitMQ RabbitMQ是一个由erlang开发的AMQP&#xff08;Advanced Message Queue &#xff09;的开源实现。AMQP 的出现其实也是应了广大人民群众的需求&#xff0c;虽然在同步消息通讯的世界里有很多公开标准&#xff08;如 COBAR的 IIOP &#xff0c;或者是 SOAP 等&…
阅读更多...
当出现“无法成功完成操作，因为文件包含病毒或潜在的垃圾软件“时的解决办法

当出现“无法成功完成操作，因为文件包含病毒或潜在的垃圾软件“时的解决办法

安装补丁或其他安装包时,被系统识别为病毒垃圾 具体解决步骤是: 1.在开始菜单&#xff0c;打开Windows 安全中心 找到主页的病毒和威胁防护 找到管理设置 最后将确认安全的文件或安装包添加到排除项即可
阅读更多...
LetCode刷题[简单题](4)顺序链表的顺序合并

LetCode刷题[简单题](4)顺序链表的顺序合并

在平常的应用场景中很多时候需要将繁杂的信息进行融合&#xff0c;比如零散的时间戳信息进行合并&#xff0c;顺序链表的合并就完美的解决这种问题的痛点。相对于原本的直接合并然后再进行排序&#xff0c;数据结构的复杂度不一样&#xff0c;因此就有类似此题的北京。融合有序…
阅读更多...
安装nginx，配置https，并解决403问题

安装nginx，配置https，并解决403问题

nginx安装 下载nginx&#xff1a;下载地址 上传到/opt目录 解压nginx&#xff0c;并进入解压后到目录 cd /opt tar -zxvf nginx-1.25.2.tar.gz cd nginx-1.25.2编译(with-http_ssl_module为https模块) ./configure --with-http_ssl_module安装 make install默认的安装目录为…
阅读更多...
华为eNSP配置专题-VLAN和DHCP的配置

华为eNSP配置专题-VLAN和DHCP的配置

文章目录 华为eNSP配置专题-VLAN和DHCP的配置1、前置环境1.1、宿主机1.2、eNSP模拟器 2、基本环境搭建2.1、基本终端构成和连接 3、VLAN的配置3.1、两台PC先配置静态IP3.2、交换机上配置VLAN 4、接口方式的DHCP的配置4.1、在交换机上开启DHCP4.2、在PC上开启DHCP 5、全局方式的…
阅读更多...
【docker】ubuntu下安装

【docker】ubuntu下安装

ubuntu下安装docker 卸载原生docker更新软件包安装依赖Docker官方GPG密钥添加软件来源仓库安装docker添加用户组运行docker安装工具重启dockerhelloworld 卸载原生docker $ apt-get remove docker docker-engine docker.io containerd runc更新软件包 apt-get update apt-get…
阅读更多...
零售数据分析模板鉴赏-品类销售结构报表

零售数据分析模板鉴赏-品类销售结构报表

不管是服装零售&#xff0c;还是连锁超市或者其他&#xff0c;只要是零售行业就绕不过商品数据分析&#xff0c;那么商品数据分析该怎么做&#xff1f;奥威BI的零售数据分析方案早早就预设好相关报表模板&#xff0c;点击应用后&#xff0c;一键替换数据源&#xff0c;立得新报…
阅读更多...
新版Android Studio搜索不到Lombok以及无法安装Lombok插件的问题

新版Android Studio搜索不到Lombok以及无法安装Lombok插件的问题

前言 在最近新版本的Android Studio中&#xff0c;使用插件时&#xff0c;在插件市场无法找到Lombox Plugin&#xff0c;具体表现如下图所示&#xff1a; 1、操作步骤&#xff1a; &#xff08;1&#xff09;打开Android Studio->Settings->Plugins&#xff0c;搜索Lom…
阅读更多...
【JVM】JVM的内存区域划分

【JVM】JVM的内存区域划分

JVM的内存区域划分 堆Java虚拟机栈程序计数器方法区运行时常量池 堆 程序中创建的所有对象都保存在堆中 Java虚拟机栈 Java虚拟机栈的生命周期和线程相同,描述的是Java方法执行的内存模型,每个方法在执行的时候都会同时创建一个栈帧用于存储局部变量表,操作栈,动态链接,方法…
阅读更多...
docker下的onlyoffice安装（for seafile）

docker下的onlyoffice安装（for seafile）

docker镜像拉取 # 拉取 onlyoffice 镜像docker pull onlyoffice/documentserver 创建所需目录 # 创建几个目录 用于 onlyoffice 的数据卷cd /opt# 建议与 seafile 容器都放在 /opt 目录方便管理mkdir seafile-onlyofficecd seafile-onlyofficemkdir logmkdir datamkdir libmkd…
阅读更多...
函数指针解释

函数指针解释

函数指针是一种特殊类型的指针&#xff0c;它指向程序中的函数而不是数据。函数指针可以让你在运行时动态地选择调用哪个函数&#xff0c;这在某些编程情景中非常有用&#xff0c;例如回调函数、动态函数调用和函数表驱动的编程。以下是关于函数指针的一些基本概念和用法&#…
阅读更多...
最新文章

Copyright @ 2022~2023