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方法props
            super(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.mfbz.cn/a/729713.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

跨境电商-Ozon平台开店指南-魔行观察

跨境电商-Ozon平台开店指南-魔行观察

商家入驻开店指南 第1步&#xff1a;注册并激活您的帐户 对于独联体以外的卖家&#xff1a;法人实体可以在平台上注册。如果您是个体经营户&#xff0c;请您首先开设一家公司。个体经营户&#xff08;土耳其的个体经营户除外&#xff09;不能在我们的平台上注册。 进行注册 …
阅读更多...
qmt量化交易策略小白学习笔记第46期【qmt编程之期货行情数据--如何获取5档盘口行情、期货结算价与持仓量】

qmt量化交易策略小白学习笔记第46期【qmt编程之期货行情数据--如何获取5档盘口行情、期货结算价与持仓量】

qmt编程之获取期货数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 感谢关注&#xff0c;咨询免费开通量化回测与获取实盘权限&#xff0c;欢迎和博主联系&#xff01; 获取5档盘口行情 …
阅读更多...
高效文本编辑器：轻松掌握内容，批量删除每隔一行带有分隔符的内容，助力文本处理更高效！

高效文本编辑器：轻松掌握内容，批量删除每隔一行带有分隔符的内容，助力文本处理更高效！

在信息爆炸的时代&#xff0c;文本处理已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;面对海量的文本内容&#xff0c;如何高效地进行编辑和整理&#xff0c;成为了许多人面临的难题。今天&#xff0c;我要向大家推荐一款高效文本编辑器——首助编辑高手&#…
阅读更多...
如何在 MySQL 中创建和使用事务?

如何在 MySQL 中创建和使用事务?

目录 1. 环境准备 2. 创建事务 3. 事务执行 4. 事务撤消 5. 总结 事务是数据库区别于文件系统的重要特征之一&#xff0c;当我们有了事务就会让数据库始终保持一致&#xff0c;同时我们还能通过事务机制恢复到某个时间点&#xff0c;这样可以保证已提交到数据库的修改不会…
阅读更多...
mysql设置密码复杂度策略，登录失败次数限制

mysql设置密码复杂度策略，登录失败次数限制

在配置文件中加入如下配置&#xff0c;重启mysql服务 [mysqld] #密码复杂度插件 plugin-load-addvalidate_password.so validate-passwordFORCE_PLUS_PERMANENT validate_password_policy2 # 0简单 1普通 2困难 validate_password_length9 # 密码长度限制 #登录失败次数、时间…
阅读更多...
云服务器可以从哪些方面降低开发运维难度

云服务器可以从哪些方面降低开发运维难度

开发和运维工作面临着诸多挑战&#xff0c;如果说现在市场上有可以快速有效解决的方案&#xff0c;那么云服务器绝对是首选&#xff0c;云服务器从多个方面显著降低了其难度。 具象到云服务器的特质中&#xff0c;不得不提的还是云服务器的弹性伸缩&#xff0c;之前的文章里有…
阅读更多...
网络流量 数据包length计算

网络流量 数据包length计算

MTUMSSIP header(20 bytes)tcp header(20 bytes) lengthMTUEthernet header(14bytes) 其中MSS为Maximum Segment Size&#xff0c;即最大报文段长度&#xff0c;其受MTU大小影响&#xff0c;这里的MTU指的是三层的&#xff0c;二层的MTU固定为1500&#xff0c;不能修改。 MT…
阅读更多...
推出RW610高度集成的低功耗无线MCU，带内置3频：1x1 Wi-Fi®6+ Bluetooth® Low Energy 5.4射频单元

推出RW610高度集成的低功耗无线MCU，带内置3频：1x1 Wi-Fi®6+ Bluetooth® Low Energy 5.4射频单元

RW610是一款高度集成的低功耗无线MCU&#xff0c;它集成了MCU和Wi-Fi6Bluetooth Low Energy (LE) 5.4射频单元&#xff0c;适用于多种应用&#xff0c;包括互联智能家居设备、游戏控制器、企业和工业自动化、智能配件和智能能源。 采用TFBGA145封装的系列器件&#xff1a;RW61…
阅读更多...
docker curl:(56) Recv failure: Connection reset by peer

docker curl:(56) Recv failure: Connection reset by peer

docker容器启动后&#xff0c;查看日志未发现错误&#xff0c;通过查询和分析&#xff0c;发现是期望容器打开的端口与容器实际打开的端口不一致导致。 1&#xff09;docker run -itd -p 8082:8082 vulfocus/log4j2-rce-2021-12-09:latest 2&#xff09;curl localhost:8082 …
阅读更多...
移动端 UI 风格，彰显不凡

移动端 UI 风格，彰显不凡

移动端 UI 风格&#xff0c;彰显不凡
阅读更多...
一文读懂数据仓库ODS层

一文读懂数据仓库ODS层

数据仓库一般分为三层&#xff0c;分别为数据贴源层&#xff08;ODS&#xff0c;Operation Data Store&#xff09;、数据公共层&#xff08;CDM&#xff0c;Common Data Model&#xff09;和数据应用层&#xff08;ADS&#xff0c;Application Data Service&#xff09;。其中…
阅读更多...
java基于ssm+jsp 高校四六级报名管理系统

java基于ssm+jsp 高校四六级报名管理系统

1前台首页功能模块 高校四六级报名管理系统&#xff0c;在系统首页可以查看首页、四六级报名、新闻资讯、我的、跳转到后台、在线客服等内容&#xff0c;如图1所示。 图1系统功能界面图 学生登录、学生注册&#xff0c;在注册页面可以填写学号、密码、姓名、学院、班级、手机、…
阅读更多...
苹果智能和人工智能最大化

苹果智能和人工智能最大化

苹果智能和人工智能最大化 除了苹果公司&#xff0c;还没有人真正使用过苹果的智能功能。它要到秋天才会分阶段发布&#xff0c;即使到那时&#xff0c;它也无法在80%或90%的iPhone安装基础上运行&#xff0c;因为它需要只有iPhone 15 Pro才能使用的设备上处理功能。没有什么能…
阅读更多...
无线模块433MHz和2.4GHz的功能与适用性比较

无线模块433MHz和2.4GHz的功能与适用性比较

433MHz和2.4GHz这两个频段常用于无线通信中的模块&#xff0c;今天我们就来介绍这两种频段无线模块各自的特点。433MHz和2.4GHz无线模块工作频段都属于国内免许可的ISM开放频段&#xff0c;因此二者使用较为广泛。 433MHz频段无线模块位于超高频(UHF)范围内&#xff0c;具体频…
阅读更多...
【0-1系列】从0-1快速了解搜索引擎是什么以及怎么用（上）

【0-1系列】从0-1快速了解搜索引擎是什么以及怎么用（上）

友情链接 社区开发版安装部署与使用教程社区版家族V2024.5版本更新说明 START>>1.快速了解搜索引擎 什么是搜索引擎数据库 搜索引擎数据库是一类专门用于数据内容搜索的NoSQL数据库&#xff0c;是非结构化大数据处理分析领域中重要的基础支撑软件。 伴随互联网、移动…
阅读更多...
【element-ui】el-date-picker动态设置picker-options

【element-ui】el-date-picker动态设置picker-options

<el-date-pickerv-model"formObj.startDate"type"date"placeholder"开始时间":picker-options"startPickerOptions"> </el-date-picker><el-date-pickerv-model"formObj.endDate"type"date"placeh…
阅读更多...
全域外卖系统源码在哪些渠道值得推荐？

全域外卖系统源码在哪些渠道值得推荐？

当前&#xff0c;全域外卖的热度持续飙升&#xff0c;并且隐隐有了大爆的趋势。许多创业者也因此有了进军全域外卖赛道的想法&#xff0c;以全域外卖系统源码在哪找为代表多个相关问题因此成为了多个创业者交流群的常客。 根据中国互联网络信息中心&#xff08;CNNIC&#xff0…
阅读更多...
使用Python和BeautifulSoup轻松抓取表格数据

使用Python和BeautifulSoup轻松抓取表格数据

你是否曾经希望可以轻松地从网页上获取表格数据&#xff0c;而不是手动复制粘贴&#xff1f;好消息来了&#xff0c;使用Python和BeautifulSoup&#xff0c;你可以轻松实现这一目标。今天&#xff0c;我们将探索如何使用这些工具抓取中国气象局网站(http://weather.cma.cn)上的…
阅读更多...
PySide(PyQt)利用回调和闭包定义信号与槽

PySide(PyQt)利用回调和闭包定义信号与槽

如图3个按钮&#xff0c;均设为checkable&#xff0c;放置在一个groupbox内成为一个按钮组&#xff0c;要求实现的功能&#xff1a;当点击某个按钮时将本按钮设为选中&#xff08;setChecked(True)&#xff0c;并取消选中按钮站中的其他所有按钮&#xff08;setChecked(False)&…
阅读更多...
PS系统教学24

PS系统教学24

去水印 仿制图章工具修复画笔工具选区-编辑-填充-内容识别 人体皮肤亮度 人体皮肤发亮 减淡工具 缺点&#xff1a;不能对所有图层取样 选择减淡工具选择高光打完高光用中间调中和一下也可以用历史记录画笔工具进行修饰也可以用加深工具进行微调 图层中的模式 滤色 曝光过…
阅读更多...
最新文章

Copyright @ 2022~2023