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. poj1386有向图判断是否存在欧拉回路或者欧拉路

      有向图的图联通是指基图联通,也就是把有向图的边改成无向图然后看是否连通.判断联通可用dfs或者并查集. 题意就是给你n个由小写字母构成的字符串,问你能不能将这n个字符串连接起来,B能接在A后面的条 ...

  2. POJ3225

    题目链接:https://vjudge.net/problem/POJ-3225 解题思路:这道题要是不看题解以本渣新现在的实力确实是做不出来. 以区间为基础建立线段树. 当X=‘U', 将区间T内的 ...

  3. POJ1905

    题目链接:http://poj.org/problem?id=1905 题目大意: 竹竿受热会膨胀.设其原长为 L ,受热膨胀后的长度 L'=(1+n*C)*L ,其中 n, C, L都是要输入的参数 ...

  4. 【Python】利用python自动发送邮件

    前言 在训练网络的过程中,需要大量的时间,虽然可以预估网络训练完成时间,但蹲点看结果着实有点不太聪明的亚子. 因此,参照师兄之前发的python利用smtp自动发邮件的代码,我作了些调整,并参照网上的 ...

  5. Java——java.lang.NumberFormatException: For input string: ""

    java.lang.NumberFormatException: For input string: "" at java.lang.NumberFormatException.f ...

  6. 使用flask实现简单的文件上传

    from flask import Flask, redirect, render_template, request, url_forfrom werkzeug.utils import secur ...

  7. NO.3 MSP432P4_SDK浏览

    网上关于MSP432的参考资料很少,我们要学习的最权威的资源只有TI提供的SDK.这是好处也是坏处,好处是我们学习的是TI一手资源,不再是拾人牙慧:坏处是英语能力要求较高. 闲话少说,我们先来看SDK ...

  8. redis 缓存穿透，缓存雪崩，缓存击穿

    1.缓存穿透:缓存穿透是指查询一个不存在的数据,由于缓存是不命中,将去查询数据库,但是数据库也无此记录,这将导致这个不存在的数据每次请求都要到存储层去查询,失去了缓存的意义.在流量大时,可能DB就挂掉 ...

  9. 【C++】表达式中各类数值型数据间的混合运算

    注意:以下内容摘自文献[1],修改了部分内容. 1.运算中各类型数据转换方向如下: 高 double    ←  float   ↑  ↑     | long     | ↑     | unsig ...

  10. StringBuffer & StringBuilder

    java.lang.StringBuffer: ①代表可变的字符序列,可以对字符串内容进行增删.                       ②很多方法与String相同,但StingBuffer是可 ...