位置: IT常识 - 正文

猿创征文|【React 三】组件实例的三大属性(state、props、refs)(关于猿猴的作文)

编辑:rootadmin
猿创征文|【React 三】组件实例的三大属性(state、props、refs)

目录

一、 State

1.概念

2.State的简单用法3. JS绑定事件 4.react 绑定事件

5.react this指向问题

6.修改state值

7.代码简写

二、props

1.概念

2.传参的基础方法、运算符传参

三、refs

定义

字符串形式的ref、回调函数下ref、createRef 创建ref容器


一、 State1.概念

推荐整理分享猿创征文|【React 三】组件实例的三大属性(state、props、refs)(关于猿猴的作文),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:猿文教育科技有限公司怎么样,关于猿猴的作文,猿类的作文,猿文教育科技有限公司怎么样,猿人作文,猿类的作文,猿类的作文,猿人作文,内容如对您有帮助,希望把文章链接给更多的朋友!

概念:state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合),组件被称为`状态机`,通过更新组件的state来更新对应的页面显示(重新渲染组件),有state称为复杂组件。

2.State的简单用法

实现简单的切换效果,这里的效果是一种覆盖

<!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>Document</title> <style> .btn{ width: 100px; height: 40px; background-color: red; } .on{ background-color: gray; } </style></head><body> <div id="root"></div> <!-- 引入react核心库 --><script src="js/react.development.js"></script><!-- 引入操作dom的扩展库 --><script src="js/react-dom.development.js"></script><!-- 引入babel来解析jsx语法 --><script src="js/babel.min.js"></script> <script type="text/babel"> class IsLike extends React.Component { state = { flag:true } //箭头函数this指向上下文,静态不可改变 changeFlag=()=>{ this.setState({flag:!this.state.flag}) } render() { const {flag}=this.state return ( <div> <button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜欢':'不喜欢'}</button> </div> ) } } ReactDOM.render(<IsLike/>,document.getElementById('root')) </script></body></html>

3. JS绑定事件let btn = document.getElementById('btn');btn.addEventListener('click',function(){   alert('按钮被点击了!');})btn.onclick = function(){ alert('按钮被点击了!');}function demo(){alert('按钮被点击了');} 4.react 绑定事件render(){return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>}

说明:

·onclick 变为 onClick。

·{函数名}返回值给click,加()就会直接调用。

5.react this指向问题demo(){      console.log(this);//undefinedconsole.log('事件被点击了');}

举例说明:

class Person{     constructor(name,age) {                 this.name = name; this.age = age;     }say(){ console.log(this); } }const p1 = new Person('张三',18);p1.say();//p1为实例对象const p2 = p1.say;p2();//undefined 类采取是严格模式6.修改state值class MyClass extends React.Component{constructor(props) {      super(props);   this.state = {isflag:true};   this.demo = this.demo.bind(this);}render(){return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>}demo(){    this.setState({isflag:!this.state.isflag})}} ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明:

猿创征文|【React 三】组件实例的三大属性(state、props、refs)(关于猿猴的作文)

bind会生成一个新的方法 并传对象 改变this的指向必须使用setState 修改才有效,修改内容为合并。有值得修改没有的不动

7.代码简写class MyClass extends React.Component{state = {isflag:true}render(){return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>} demo = () => {    this.setState({isflag:!this.state.isflag}) }}ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明:

类中的属性直接赋值,省去构造函数。

自定义方法—用赋值语句的形式+箭头函数

二、props1.概念

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

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

props 是不可变的,只能通过 props 来传递数据。

2.传参的基础方法、运算符传参

其中先通过let创建了一个对象,在通过三点运算符,来遍历得到,对象里面的值

在通过对象结构得到props中的realname和age,GetName是Person组件的子组件,在Person中传值给GetName,GetName通过props接收

<!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>Document</title></head><body> <div id="root"></div> <!-- 引入react核心库 --><script src="js/react.development.js"></script><!-- 引入操作dom的扩展库 --><script src="js/react-dom.development.js"></script><!-- 引入babel来解析jsx语法 --><script src="js/babel.min.js"></script> <script type="text/babel"> class GetName extends React.Component { render() { return ( <div>姓名:{this.props.realname}</div> ); } } class Person extends React.Component { render() { const {realname,age} = this.props return ( <div> <GetName realname={this.props.realname}/> <span>年龄:{age}</span> </div> ); } } let p1 = {realname:'张三',age:19} ReactDOM.render(<Person {...p1}/>,document.getElementById('root')) </script></body></html>三、refs定义

组件内的标签可以定义ref来标识自己。

字符串形式的ref、回调函数下ref、createRef 创建ref容器

字符串形势,是直接通过ref绑定值,通过在点击事件中获取ref的值,ref如同把整个input表单传了过来,在获取值的时候需要点一下value来获取的是input表单的内容

通过ref中的箭头函数,绑定了值,在方法中直接获取即可,穿过来时,由于react的编译不需要写target但是,还是需要点出value

通过createRef来创建两个容器,通过对象的形势与ref绑定,直接就可以在方法中得到值,不过这里要注意,打印还是获取的时候在点value之前点一个current,如this.realname.current.value

<!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>Document</title></head><body> <div id="root"></div> <!-- 引入react核心库 --><script src="js/react.development.js"></script><!-- 引入操作dom的扩展库 --><script src="js/react-dom.development.js"></script><!-- 引入babel来解析jsx语法 --><script src="js/babel.min.js"></script> <script type="text/babel"> class Person extends React.Component { //createRef 创建ref容器 realname = React.createRef() age = React.createRef() ShowInfo=()=>{ //字符串 // const {realname,age}=this.refs // console.log(`姓名:${realname.value}年龄:${age.value}`); //回调函数 // let realname = this.realname.value // let age = this.age.value // console.log(`姓名:${realname}年龄:${age}`); //类绑定 console.log(this.realname.current.value); console.log(this.age.current.value); } render() { return ( /*字符串形势 <div> <p><input type="text" placeholder="请输入姓名" ref='realname'/></p> <p><input type="text" placeholder="年龄" ref='age'/></p> <p><button onClick={this.ShowInfo}>提交</button></p> </div> */ //回调函数 // <div> // <p><input type="text" placeholder="请输入姓名" ref={e=>this.realname=e}/></p> // <p><input type="text" placeholder="年龄" ref={e=>this.age=e}/></p> // <p><button onClick={this.ShowInfo}>提交</button></p> // </div> //createRef 创建ref容器 <div> <p><input type="text" placeholder="请输入姓名" ref={this.realname}/></p> <p><input type="text" placeholder="年龄" ref={this.age}/></p> <p><button onClick={this.ShowInfo}>提交</button></p> </div> ); } } ReactDOM.render(<Person/>,document.getElementById('root')) </script></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/299791.html 转载请保留说明!

上一篇:大数据框架之Hadoop:MapReduce(三)MapReduce框架原理——OutputFormat数据输出(大数据相关框架)

下一篇:chatGPT之Python API启用上下文管理

  • 小度可以连接手机热点使用吗(小度可以连接手机投屏吗)

    小度可以连接手机热点使用吗(小度可以连接手机投屏吗)

  • 笔记本怎么装系统(笔记本怎么装系统win11)

    笔记本怎么装系统(笔记本怎么装系统win11)

  • 微信没有网络可以计步吗(微信没有网络可以删除好友吗)

    微信没有网络可以计步吗(微信没有网络可以删除好友吗)

  • qq艾特别人怎么变黑色了(qq艾特别人怎么变黑色了怎么解决)

    qq艾特别人怎么变黑色了(qq艾特别人怎么变黑色了怎么解决)

  • 小天才z1s隐藏功能(小天才z1s隐藏功能大全拨号)

    小天才z1s隐藏功能(小天才z1s隐藏功能大全拨号)

  • 快手管理员是干嘛的(快手管理员是干什么的)

    快手管理员是干嘛的(快手管理员是干什么的)

  • 通常微机中所指的80486是(在常见微机中cpu的主要作用是)

    通常微机中所指的80486是(在常见微机中cpu的主要作用是)

  • 怎么把电信4g改5g(怎么把电信4g改5g手机)

    怎么把电信4g改5g(怎么把电信4g改5g手机)

  • 怎么把三个视频合成一个视频(怎么把三个视频做成三屏)

    怎么把三个视频合成一个视频(怎么把三个视频做成三屏)

  • 美团上订民宿不能退吗(美团订民宿不让住了)

    美团上订民宿不能退吗(美团订民宿不让住了)

  • 淘宝月销量怎么变少了(淘宝月销量怎么变少了2个)

    淘宝月销量怎么变少了(淘宝月销量怎么变少了2个)

  • 荣耀5x可以插电信卡吗(荣耀5x充电)

    荣耀5x可以插电信卡吗(荣耀5x充电)

  • 苹果手机数据怎么转移到另一个苹果手机(苹果手机数据怎么转移到安卓手机)

    苹果手机数据怎么转移到另一个苹果手机(苹果手机数据怎么转移到安卓手机)

  • 多媒体数据压缩技术类型(多媒体数据压缩技术)

    多媒体数据压缩技术类型(多媒体数据压缩技术)

  • 云计算最上层是什么(云计算中最关键的两层)

    云计算最上层是什么(云计算中最关键的两层)

  • 快手出现已戳怎么取消(快手为什么会自动显示已戳)

    快手出现已戳怎么取消(快手为什么会自动显示已戳)

  • 微信怎么看发消息的时间(微信怎么看发消息的具体时间)

    微信怎么看发消息的时间(微信怎么看发消息的具体时间)

  • 快手如何修改浏览模式(快手如何修改浏览量)

    快手如何修改浏览模式(快手如何修改浏览量)

  • word如何画三线制表格(word如何画三线表格里面有十二行)

    word如何画三线制表格(word如何画三线表格里面有十二行)

  • 安卓数据线有几种(安卓数据线有几根线)

    安卓数据线有几种(安卓数据线有几根线)

  • 2048sp什么意思(2048sp多少钱)

    2048sp什么意思(2048sp多少钱)

  • iphone8p什么处理器(苹果8p处理器好吗)

    iphone8p什么处理器(苹果8p处理器好吗)

  • 华为荣耀8x录音在哪里(华为荣耀8x录音功能在哪里)

    华为荣耀8x录音在哪里(华为荣耀8x录音功能在哪里)

  • 胆固醇为什么会多起来呢?(胆固醇为什么会高)

    胆固醇为什么会多起来呢?(胆固醇为什么会高)

  • 税种有哪几种
  • 一般纳税人的税点
  • 公允价值变动损益属于什么科目
  • 一般纳税人简易征收最新政策2023
  • 工程结算成本和合同成本区别
  • 开了农民工资金专户必须使用吗
  • 销售费用计入产品生产成本吗
  • 社保基数变更上限怎么办
  • 个人所得税怎么算公式是什么
  • 计提存货跌价准备怎么计算
  • 一次性奖金并入综合所得
  • 存货不同入账基数怎么算
  • 公司委托收款该怎么办
  • 小规模免税农产品怎么做账
  • 股东转入的钱算什么
  • 本期增加发生额是指
  • 地税没报税怎么办
  • 年初未分配利润加本年净利润等于
  • 进项转出滞纳金规定
  • 商业承兑汇票贴现转让
  • 购入固定资产税费怎么算
  • 小规模纳税人咨询服务费税率是多少
  • 普通发票也属于增值税发票吗
  • 发票未到计提房租费用会计分录
  • 个人所得税申报截止时间
  • 购买机器设备配件账务处理
  • 公务车加油入什么科目
  • PHP:mb_substr_count()的用法_mbstring函数
  • 事业单位投资收回账务处理
  • 认缴出资日期没到
  • 如何计算经营性负债
  • linux root 命令
  • 公司暂估成本是什么意思
  • php程序开发范例宝典光盘
  • 商品购进核算
  • Waterfalls at the source of the Mundo River, Sierra de Riopar, Albacete, Spain (© Westend61/Getty Images)
  • 什么是水利建设基金税
  • 固定资产捐赠的账务处理
  • 微信小程序详细教程
  • 代付代缴社保会计分录
  • javascript高阶
  • 产权转移数据印花
  • 融资租入固定资产的入账价值
  • 网上申报完还需要去税务局吗
  • php接口怎么调用
  • 定期定额自行申报表
  • 保险公司作为奖金怎么算
  • 缴纳水土保持补偿费分录是什么
  • 外汇增值税是怎样计算
  • 受托代销的含义
  • 公司冲账发票做账流程
  • 收到税务局退回的增值税税款怎么做账
  • 企业购入投资性房地产
  • 公司的进账能打到私人卡上
  • 库存现金的主要内容有哪些
  • 旅行社滞纳金计算公式
  • 母子公司可以合并吗
  • mysql查询包含
  • mysql求两个字段的和
  • macbook安装ghost win10
  • Win10任务栏天气怎么关闭
  • windows如何关闭
  • js自动输入
  • python数据结构与算法分析 第2版(图灵出品)
  • android 退出app
  • android系统介绍
  • 3行程序搞定SVM分类-用JAVA程序调用LibSVM API 最简单的示例
  • virtualbox no bootable medium
  • python嵌套列表生成
  • 前端自动化开发软件
  • shell正则表达式语法
  • NGUI简介
  • javascript获取对象方法属性
  • unity-3d
  • 关于学习的名言
  • python 命令
  • 为什么要征收城乡土地
  • 税务局开展税收宣传
  • 不予处理的法律依据
  • 土地增值税扣除项目金额怎么计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设