react学习——09react中props属性

1、基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--    移动端适配--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_props基本使用.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="root2"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/class Person extends React.Component{render(){const {name,age,sex}=this.props;return(<ul ><li>姓名:{name}</li><li>性别:{sex}</li><li>年龄:{age}</li></ul>)}}const p ={name:"jack",age:20,sex:"男"}ReactDOM.render(<Person name="tom" age="18" sex="女"/>,document.getElementById('root'))ReactDOM.render(<Person {...p}/>,document.getElementById('root2'))
</script>
</body>
</html>

2、props对属性进行限制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--    移动端适配--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2_props进行限制.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--引入prop-types.js库,用于对组件的props进行类型限制-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!--用于对组件标签属性限制-->
<script type="text/babel">/*此处一定要写babel*/class Person extends React.Component{render(){const {name,age,sex}=this.props;return(<ul ><li>姓名:{name}</li><li>性别:{sex}</li><li>年龄:{age+1}</li></ul>)}}//对标签属性进行类型限制、必要性的限制Person.propTypes={name:PropTypes.string.isRequired,//限制name必传,且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number,//限制age为数值speak:PropTypes.func,//限制speak为函数}//指定默认标签属性Person.defaultProps={sex:'男',//sex默认值为男age:18,//age默认值为18}const p ={name:"jack",age:20,sex:"男"}ReactDOM.render(<Person name="tom" age={18} sex="女" speak={speak}/>,document.getElementById('root'))ReactDOM.render(<Person {...p}/>,document.getElementById('root2'))ReactDOM.render(<Person name="cj"/>,document.getElementById("root3"))function speak(){console.log("我说话了")}
</script>
</body>
</html>

3、简写方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--    移动端适配--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3_props简写.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--引入prop-types.js库,用于对组件的props进行类型限制-->
<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必传,且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number,//限制age为数值speak:PropTypes.func,//限制speak为函数}//指定默认标签属性static defaultProps={sex:'男',//sex默认值为男age:18,//age默认值为18}render(){const {name,age,sex}=this.props;return(<ul ><li>姓名:{name}</li><li>性别:{sex}</li><li>年龄:{age+1}</li></ul>)}}const p ={name:"jack",age:20,sex:"男"}ReactDOM.render(<Person name="tom" age={18} sex="女" speak={speak}/>,document.getElementById('root'))ReactDOM.render(<Person {...p}/>,document.getElementById('root2'))ReactDOM.render(<Person name="cj"/>,document.getElementById("root3"))function speak(){console.log("我说话了")}
</script>
</body>
</html>

4、函数式组件使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--    移动端适配--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>4_props与构造器.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--引入prop-types.js库,用于对组件的props进行类型限制-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!--用于对组件标签属性限制-->
<script type="text/babel">/*此处一定要写babel*/class Person extends React.Component{constructor(props) {//构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this方法propssuper(props);console.log("constructor",this.props)}//对标签属性进行类型限制、必要性的限制static propTypes={name:PropTypes.string.isRequired,//限制name必传,且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number,//限制age为数值speak:PropTypes.func,//限制speak为函数}//指定默认标签属性static defaultProps={sex:'男',//sex默认值为男age:18,//age默认值为18}render(){const {name,age,sex}=this.props;return(<ul ><li>姓名:{name}</li><li>性别:{sex}</li><li>年龄:{age+1}</li></ul>)}}ReactDOM.render(<Person name="tom" age={18} sex="女" speak={speak}/>,document.getElementById('root'))function speak(){console.log("我说话了")}
</script>
</body>
</html>

效果
在这里插入图片描述

理解

1、每个组件对象都会有 props(properties 的简写)属性
2、组件标签的所有属性都保存在 props 中

作用

1、通过标签属性从组件外向组件内传递变化的数据
2、注意: 组件内部不要修改 props 数

编码操作

1、内部读取某个值

this.props.propertyName

2、对 props 中的属性值进行类型限制和必要性限制

Person.propTypes = {name: React.PropTypes.string.isRequired, age: React.PropTypes.number.isRequired
}

3、扩展属性: 将对象的所有属性通过 props 传

<Person {...person}/>

4、默认属性值

Person.defaultProps = {name: 'Mary' }

5、组件类的构造函数

constructor (props) {super(props)console.log(props) // 查看所有属性
}

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

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

相关文章

行业原型:智能资产管理平台-个人资产服务

​行业原型预览链接&#xff1a;&#xff08;请与班主任联系获取原型文档&#xff09; 文件类型&#xff1a;.rp 支持版本&#xff1a;Axrure RP 8 文档名称&#xff1a;金融&#xff1a;智能资产管理平台&#xff08;个人资产服务&#xff09; 文件大小&#xff1a;1.75 MB 智…

光伏发电项目是如何提高开发效率的?

随着全球对可再生能源需求的持续增长&#xff0c;光伏发电项目的高效开发成为关键。本文将深入探讨如何在实际操作中提高光伏发电项目的开发效率。 一、优化选址流程 1、数据收集与分析&#xff1a;利用卫星地图和遥感技术&#xff0c;收集目标区域的光照资源、地形地貌、阴影…

chrome 使用本地替换功能替换接口返回内容

前言 在web开发或测试过程中&#xff0c;我们经常会需要修改接口返回值来模拟数据进行开发或测试。 常用的方式一般通过抓包工具&#xff0c;如charles&#xff0c;或fildder 的功能。 例如我们可以使用charles打断点的方式&#xff0c;或者使用charles的map local 功能进行…

手工微调embedding模型,让RAG应用检索能力更强

BAAI/bge-small-en 目前HuggingFace的MTEB(海量文本Embedding基准)排行榜上排名第一的Embedding模型是big-large-en&#xff0c;它由北京人工智能研究院(BAAI&#xff0c;智源)开发。它是一种预训练的transformer模型&#xff0c;可用于各种自然语言处理任务&#xff0c;如文本…

艺术家电gorenje x 设计上海丨用设计诠释“生活的艺术”

2024年6月19日—22日&#xff0c;艺术家电gorenje亮相“设计上海”2024&#xff0c;以“gorenje是家电更是艺术品”为题&#xff0c;为人们带来融入日常的艺术之美。设计上海2024不但汇集了国内外卓越设计品牌和杰出独立设计师的家具设计作品&#xff0c;还联合国内外多名设计师…

ESP-01S 模块使用串口助手获取天气参数

ESP-01S 模块 接线AT命令ESP01S联网测试并获取心知天气测试流程 接线 引脚接线3V3接电源RST外部复位引脚&#xff0c;低电平复位。可以悬空或者接高电平。EN接高电平&#xff0c;高电平使能。TX接CH340的RXRX接CH340的TXIO0悬空&#xff1a;Flash Boot&#xff0c;工作模式。下…

智慧在线医疗在线诊疗APP患者端+医生端音视频诊疗并开处方

智慧在线医疗&#xff1a;音视频诊疗新纪元 &#x1f310; 智慧医疗新篇章 随着科技的飞速发展&#xff0c;智慧医疗正逐步走进我们的生活。特别是在线医疗&#xff0c;凭借其便捷、高效的特点&#xff0c;已成为许多患者的首选。而其中的“智慧在线医疗患者端医生端音视频诊疗…

Jrebel热部署

1、下载包 2、解压后本地启动exe文件 3、配置 http://127.0.0.1:8888/{GUID} https://www.guidgen.com/ 获取 GUID 4、激活后&#xff0c;Jrebel针对本项目模块进行勾选 5、如果报错&#xff0c;setting设置offine

代码随想录训练营Day 69|并查集理论基础、卡码网107.寻找存在的路径

1.并查集理论基础 并查集理论基础 | 代码随想录 并查集可以解决什么问题呢&#xff1f; 主要就是集合问题&#xff0c;两个节点在不在一个集合&#xff0c;也可以将两个节点添加到一个集合中。 注意&#xff1a;求根是求箭头出发的数 路径压缩&#xff1a;求根的根。把根的根的…

解析JSON字符串

QJsonDocument类用于解析JSON字符串&#xff0c;

详解 | DigiCert EV代码签名证书

简介 DigiCert EV 代码签名证书是一种高级别的代码签名证书&#xff0c;它不仅提供了标准代码签名证书的所有安全特性&#xff0c;还增加了额外的身份验证流程&#xff0c;以确保软件开发者或发布者的身份得到最严格验证。这对于提升软件的信任度、防止恶意篡改和确保下载安全…

vue3的网站项目内嵌到别的项目内部,通过用户名免登陆

前言&#xff1a;想把vue3的网站项目1内嵌到别的项目2内部。 希望在项目2内&#xff0c;点击一个按钮就出现一个页面进入项目1&#xff0c;其中用户名密码是互通的&#xff08;这一块需要接口调用实现同步&#xff09;&#xff0c;仔细一想&#xff0c;原理应该是提供一个地址链…

【Python系列】FastAPI 中的路径参数和非路径参数解析问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

dockercompose部署redis哨兵模式并集成springboot

第一步 编写compose文件 docker-compose.yml version: 3.8networks:redis-network:driver: bridgeservices:redis-master:image: redis:7.2.4container_name: redis-mastercommand: ["sh", "-c", "redis-server --protected-mode no --slave-announ…

python项目加密和增加时间许可证

1.bat&#xff0c;执行如下的命令&#xff0c;第一句是更新或增加许可证 第二句是加密draw_face.py python offer.py pyarmor obfuscate -O dist draw_face.py绘制自制人脸.py&#xff0c;调用加密的代码draw_face代码 import sys import os import cv2# 添加加密模块所在的路…

R语言做图

目录 1. 图形参数 2. 低级图形 3. 部分高级图形 参考 1. 图形参数 图形参数用于设置图形中各种属性。 有些参数直接用在绘图函数内&#xff0c;如plot函数可以用 pch&#xff08;点样式&#xff09;、col&#xff08;颜色&#xff09;、cex&#xff08;文字符号大小倍数&…

ONLYOFFICE 桌面编辑器 8.1

ONLYOFFICE 简介 ONLYOFFICE 是一个开源的办公套件&#xff0c;它提供了在线文档编辑器、表格编辑器和演示文稿编辑器&#xff0c;这些编辑器能够兼容 Microsoft Office 格式&#xff08;.docx, .xlsx, .pptx&#xff09;以及其他流行的标准格式。ONLYOFFICE 的核心功能包括多…

分类预测 | ZOA-PCNN-AT-SVM斑马优化并行卷积-支持向量机融合注意力机制的故障识别

分类预测 | ZOA-PCNN-AT-SVM斑马优化并行卷积-支持向量机融合注意力机制的故障识别 目录 分类预测 | ZOA-PCNN-AT-SVM斑马优化并行卷积-支持向量机融合注意力机制的故障识别分类效果基本描述程序设计参考资料 分类效果 基本描述 1.ZOA-PCNN-AT-SVM斑马优化并行卷积-支持向量机融…

《2024天猫618大促-首波男装销售报告》

这份报告主要分析了2024年天猫618大促期间的首波男装销售情况,从多个维度进行了深入的复盘和分析。报告中不仅包含了销售数据的统计分析,还对消费者行为、品牌表现、产品趋势等方面进行了详细的解读。通过对这些数据和信息的深入挖掘,报告揭示了当前男装市场的一些重要趋势和特…

qt经典界面框架

目的 其实就是一个简单的界面显示&#xff0c;是很常用的形式。 说起来简单也是简单&#xff0c;但当初&#xff0c;刚开始做时&#xff0c;感觉非常的复杂&#xff0c;不知如何下手。 现在感觉简单多了。 这个框架利用了QT的现成的MainWindow与QDockWidget&#xff0c;这样就…