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用法更新的更多相关文章

  1. React ref的用法

    React的ref有3种用法: 1. 字符串(已废弃)2. 回调函数3. React.createRef() (React16.3提供) 1. 字符串 最早的ref用法. 1.dom节点上使用,通过t ...

  2. React Hooks用法大全

    前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...

  3. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  4. React Ref 其实是这样的

    大家好,我是Mokou,好久没有冒泡了,最近一直在看研究算法和数据结构方面的东西,但是似乎很多前端不喜欢看这种东西,而且目前本人算法方面也很挫,就不献丑了. 当然了,最近也开始研究React了,这篇文 ...

  5. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  6. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  7. React Ref 和 React forwardRef

    Ref 和Dom,Ref是reference(引用)的简写. 能力:大多数情况下,props前递可以解决一切问题,但是依然有需要触达React实例或者Dom节点的情况,这时候应该使用React Ref ...

  8. React源码 React ref

    ref 的功能,在 react 当中.我们写了一个组件,在这个时候,我们的 render function 里面我们会渲染一系列的子组件或者 dom 节点,有时候我们会希望有这样的需求,就是我们要获取 ...

  9. React Native热更新(iOS)-Pushy

    React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...

  10. React ref回调函数例子

    ref属性也可以是一个回调函数而不是一个名字.   这个函数将要在组件被挂载之后立即执行. 这个参照的组件将会作为该函数的参数,这个函数可以立即使用这个组件参数,当然也可以将其保存供以后使用. 当这个 ...

随机推荐

  1. if语法案例

    if语法案例 1. 判断系统剩余内存 1) 脚本正文 2) 执行结果 2.监控web和数据库的方法 1) 端口监控 2) 进程监控 3) 客户端模拟 4) 数据库判断* 3.mysql数据库检测命令演 ...

  2. 在k8s中使用harbor仓库

    在k8s中使用harbor仓库 修改每个node上的docker认证仓库 将每个node节点上的docker同样需要配置可信任仓库 vi /etc/docker/daemon.json #修改为 {& ...

  3. Java笔记_变量作用域

    变量作用域 在Java中主要的变量就是属性(成员变量)和局部变量. 局部变量一般是指在成员方法中定义的变量. 全局变量作用域:整个类体.局部变量(除属性意以外的其他变量)作用域:为定义它的代码块中! ...

  4. 一条命令删除所有静态路由华为eNSP

    在系统视图下执行undo ip route-static all,可以一次删除所有静态路由,包括缺省路由. 默认状态: 执行 undo ip route-static all

  5. qt creator 常量中有换行符(转)

    这篇文章写于QT5.6的诞生,它是QT5的第一个长期支持版.这也是QT5已成熟的里程碑. 我搭建的环境是:Win10+VS2015+QT5.6+QtCreator 在安装VS2015的时候,若是用Qt ...

  6. Pytorch实战学习(八)：基础RNN

    <PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili Basic RNN ①用于处理序列数据:时间序列.文本.语音..... ②循环过程中权重共享机制 一.RNN原理 ① X ...

  7. pycharm—python__________windows下安装

    参考地址:https://www.runoob.com/w3cnote/pycharm-windows-install.html 一.安装python       1.pip 和 setuptools ...

  8. 嵌在Android app的html 拨打不了电话，发送不了短信

    html嵌在app里面的 <a href="tel:xxx"></a> <a href="sms:phoneNmber?body=1111& ...

  9. es实现规格动态域生成

    1.就是把sepc的可以提取出来作为一个域(sepc是一个规格参数) 封装搜索条件(跟jdbc流程一样) @requestparam( required = false) 的作用?   不传值后台也不 ...

  10. CNN模型踩坑记录

    刚刚在跑textCNN的模型,加载了字典后,在同样的输入下模型的输出一直在变化,先发现损失函数一直在变化,不停debug之后发现是模型的输出一直在变化,在模型输入一直不变下模型输出不同,最后发现是模型 ...