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. 6.1Go方法

    第六章 Go方法 在第三章中讲解了struct,面向对象编程OOP已经是一个编程范式了,Go语言同样支持OOP开发. 一个对象就是一个变量,在这个对象中包含了一些方法,一个方法是一个和特殊类型关联的函 ...

  2. 干货分享：如何使用Kubernetes的Ingress API

    您可以通过使用诸如Kong for Kubernetes的Ingress控制器(使用自定义资源定义并提供许多插件)来极大地扩展Ingress资源的功能. Kubernetes正在整个技术行业中得到采用 ...

  3. LinkedList详解-源码分析

    LinkedList详解-源码分析 LinkedList是List接口的第二个具体的实现类,第一个是ArrayList,前面一篇文章已经总结过了,下面我们来结合源码,学习LinkedList. 基于双 ...

  4. 将BeyondCompare设置为TortoiseSVN的扩展比较工具

    1)点击鼠标右键 -> 点击TortoiseSVN -> Settings,如下图: 2)选择Diff Viewer - > 选择External(并配置好参数),具体如下图: 3) ...

  5. [推荐]大量 Blazor 学习资源（二）

    继上一篇<[推荐]大量 Blazor 学习资源(一)>之后,社区反应不错,但因个人原因导致这篇文章姗姗来迟,不过最终还是来了!这篇文章主要收集一些常用组件.书籍和电子书. 资料来源:htt ...

  6. angularjs 路由切换回到顶部

    angularjs路由切换  页面不会回到顶部 问题: 在angularjs中  ui-sref或者$state.go(),通过路由切换页面,发现新打开的路由页面仍然停留在上一次的路由页面访问的位置. ...

  7. Parrot os KDE还是MATE版本

    在经历了KDE桌面痛苦折磨后,准备转投MATE的怀抱,不得不说Parrot KDE的ram的占有和windows 10差不多,大量的图形化处理,让我本来不多的内存更加血上加霜. 所以,关于版本的推荐, ...

  8. [Pyspark]RDD常用方法总结

    aggregate(zeroValue, seqOp, combOp) 入参: zeroValue表示一组初值 Tuple seqOp表示在各个分区partition中进行 什么样的聚合操作,支持不同 ...

  9. 【算法基础】KMP字符串

    给定一个模式串S,以及一个模板串P,所有字符串中只包含大小写英文字母以及阿拉伯数字. 模板串P在模式串S中多次作为子串出现. 求出模板串P在模式串S中所有出现的位置的起始下标. 输入格式 第一行输入整 ...

  10. 使用RTL进行硬件模型编程的局限性

    https://mp.weixin.qq.com/s/Nj_d3hwgNX4kWVtKsqMSWg   ​​   硬件模型编程,即Hardware Model Programming.在RTL抽象级别 ...