2020-03-31
react中的ref的3种方式

react中ref的3种绑定方式

方式1: string类型绑定
类似于vue中的ref绑定方式，可以通过this.refs.绑定的ref的名字获取到节点dom
注意的是 这种方式已经不被最新版的react推荐使用，有可能会在未来版本中遗弃
 
 
方式2: react.CreateRef()
通过在class中使用React.createRef()方法创建一些变量，可以将这些变量绑定到标签的ref中
那么该变量的current则指向绑定的标签dom
 
 
方式3: 函数形式
在class中声明函数，在函数中绑定ref
使用这种方法可以将子组件暴露给父组件以使得父组件能够调用子组件的方法
 
 
通过函数的方法绑定ref可以将整个子组件暴露给父组件
 
 
 
注意: react并不推荐过度使用ref，如果能通过state做到的事情，就不应该使用 refs 在你的 app 中“让事情发生”。
过度使用ref并不符合数据驱动的思想
 

react中的ref的3种方式的更多相关文章

  1. React中创建组件的3种方式

    目前作者所知道的创建react组件的方式有三种: 函数式定义(无状态组件) function MyComponent(props){ return( <h1>mycomponent< ...

  2. React中组件通信的几种方式

    https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  3. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  4. react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

  5. linux内核分析作业4：使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. Shell脚本中执行mysql的几种方式（转）

    Shell脚本中执行mysql的几种方式(转) 对于自动化运维,诸如备份恢复之类的,DBA经常需要将SQL语句封装到shell脚本.本文描述了在Linux环境下mysql数据库中,shell脚本下调用 ...

  8. Java中HashMap遍历的两种方式

    Java中HashMap遍历的两种方式 转]Java中HashMap遍历的两种方式原文地址: http://www.javaweb.cc/language/java/032291.shtml 第一种: ...

  9. JAVA中集合输出的四种方式

    在JAVA中Collection输出有四种方式,分别如下: 一) Iterator输出. 该方式适用于Collection的所有子类. public class Hello { public stat ...

随机推荐

  1. xampp apache 安全性问题

    要禁止 Apache 显示目录结构列表,只需将 Option 中的 Indexes 去掉即可.<Directory "D:/Apa/blabla"> Options I ...

  2. Apache 慢连接dos

    http://neue.v2ex.com/t/108717------不实用 http://www.blogjava.net/bukebushuo/articles/293776.html http: ...

  3. 【python爬虫】scrapy入门7:Scrapy中runspider和crawl的区别

    runspider:不依赖创建项目 命令:scrapy runspider myspider.py  等同于  pyhton myspider.py crawl:使用spider进行爬取,依赖项目创建 ...

  4. python+selenium实现百度关键词搜索自动化操作

    缘起 之前公司找外面网络公司做某些业务相关关键词排名,了解了一下相关的情况,网络公司只需要我们提供网站地址和需要做的关键词即可,故猜想他们采取的方式应该是通过模拟用户搜索提升网站权重进而提升排名. 不 ...

  5. Git-Jenkins-代码的上线

    第一章:自动化上线代码基本介绍 1.软件开发生命周期 老板的创意---产品经理---立项---开发团队---测试团队---运维上线 产品经理---加需求---开发团队---测试----更新代码,上线 ...

  6. eatwhatApp开发实战（八）

    在App中增,删功能都有了,这次我们来做改的功能.在项目中点击items项时对对应的条目中的商店名称进行修改. 点击items跳出一个对话框,里面包含了输入框.修改按钮和取消按钮: AlertDial ...

  7. Linux（一）：VMware安装出现的问题

    目录 1 兼容性问题 2 VMware打卡虚拟机提示"此虚拟机可能已被复制或移动" 1 兼容性问题 问题:VMware Workstation 与 Device/Credentia ...

  8. css background-image 学习笔记

    先给出图片原样 1.默认从从上到右下1比1 填充的,如果元素的高度和宽度小于图片,则只能显示部分图片.效果如下图 2.如果元素的高度和宽度大于图片,则默认会用图片平铺元素.效果如下图 3.可以是用ba ...

  9. dell5460笔记本电脑ubuntu18.04系统音频驱动的安装和使用

    一.背景: 近期使用dell5460笔记本在ubuntu系统下观看视频,发现没有声音,考虑安装音频驱动. 二.音频驱动的安装 linux系统的音频驱动基于ALSA(即Advanced Linux So ...

  10. 【RT-Thread笔记】OneNet软件包的使用

    去年,RT-Thread发布了RT-Thread Studio初版RT-ThreadStudio的使用体验,经过不断更新迭代之后,来到了V1.1.0,咱也来拥抱一下新版本. 本篇笔记咱们以接入OneN ...