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. 流复制-pg_basebackup (有自定义表空间)

    一.组成部分 1.walsender进程是用来发送WAL日志记录的 2.walreceiver进程是用来接收WAL日志记录的 3.startup进程是用来apply日志的 二.主库配置 1.授权账号, ...

  2. 新概念英语三 新东方主讲Lesson1

    新概念二 Lesson95 词汇 ①get a shock 吓了一跳,得到一个惊喜 例:his wife got a shock get into a such mess 这么不幸搞得一片狼籍弄得这样 ...

  3. ubuntu 下安装 mysql 启动报错：ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

    环境: ubuntu LTS 18.04.1 mysql Ver 14.14 Distrib 5.7.29, for Linux (x86_64) 初探 linux,按照如下安装完mysql sudo ...

  4. Qt版本中国象棋开发（三）

    实现功能:棋子初始化及走棋规则 棋子类: #ifndef STONE_H #define STONE_H #include <QString> class Stone { public: ...

  5. Java中的集合类型体系（一）

    Java中的集合类型体系(一) 提问:为什么需要集合? 通常情况下,程序需要根据运行时才知道创建了多少对象.若非程序运行时,而在开发阶段,我们并不知道创建了多少对象,甚至不知道对象的准确类型,为了满足 ...

  6. python调用大漠插件教程02大漠插件绑定测试工具

    什么是大漠插件绑定测试工具? 这是大漠插件为了方便使用者调试绑定窗口的模式而设计的,因为有些程序不会接受一般的鼠键事件的响应模式,每个程序所需要的响应模式都不尽相同,所以这个工具可以使我们在绑定窗口时 ...

  7. Binlog2sql+CentOS7 离线安装

    Binlog2sql+CentOS7 离线安装 目录 Binlog2sql+CentOS7 离线安装 1. 环境 2. 下载 3.1 Pip 安装 3.2 PyMySQL/mysql-replicat ...

  8. 02 . Redis哨兵

    Redis高可用概述 ​ 在 Web 服务器中,高可用 是指服务器可以 正常访问 的时间,衡量的标准是在 多长时间 内可以提供正常服务(99.9%.99.99%.99.999% 等等).在 Redis ...

  9. JavaSE(三） 变量与运算符

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 2 变量的使用 2.1按数据类型分类 ​ 整型 : byte(1字节 = 8bit) short(2字节 ...

  10. Java蓝桥杯 算法训练 复数归一化

    算法提高 复数归一化 时间限制:1.0s 内存限制:512.0MB 编写函数Normalize,将复数归一化,即若复数为a+bi,归一化结果为a/sqrt(aa+bb) + ib/sqrt(aa+b* ...