ref用法

 

目录

React中提供两种方法创建ref对象:

类组件获取 Ref 三种方式

① Ref属性是一个字符串。

② Ref 属性是一个函数。

③ Ref属性是一个ref对象。

高级用法1:forwardRef 转发 Ref

高级用法2:ref实现组件通信


【ref作用】:最熟悉的就是  用 Ref 获取真实 DOM 元素和获取类组件实例,除此之外的功能,ref 派生出一些其他的高级用法,能够解决一些特殊场景下的问题

React中提供两种方法创建ref对象:

        第一种: 类组件中  React.createRef 创建一个 ref 对象。

class Index extends React.Component{constructor(props){super(props)this.currentDom = React.createRef(null)}componentDidMount(){console.log(this.currentDom)}render= () => <div ref={ this.currentDom } >ref对象模式获取元素或组件</div>
}

        第二种:函数组件中  React.useRef 创建 Ref

export default function Index(){const currentDom = React.useRef(null)React.useEffect(()=>{console.log( currentDom.current ) // div},[])return  <div ref={ currentDom } >ref对象模式获取元素或组件</div>
}

【什么是 ref 对象,所谓 ref 对象就是用 createRef 或者 useRef 创建出来的对象】

【问:在函数组件中为什么不能用 createRef ?】
        答:类组件有一个实例 instance 能够维护像 ref 这种信息,但函数组件每次更新时所有的变量都会重新声明,此时 ref 就会随着函数组件执行被重置。


类组件获取 Ref 三种方式

  • ① Ref属性是一个字符串。
/* 类组件 */
class Children extends Component{  render=()=><div>hello,world</div>
}/* TODO:  Ref属性是一个字符串 */
export default class Index extends React.Component{componentDidMount(){console.log(this.refs)}render=()=> <div><div ref="currentDom"  >字符串模式获取元素或组件</div><Children ref="currentComInstance"  /></div>
}

React 在底层逻辑,会判断类型,如果是 DOM 元素,会把真实 DOM 绑定在组件 this.refs (组件实例下的 refs )属性上,如果是类组件,会把子组件的实例绑定在 this.refs 上。(函数组件没有实例,不能被 Ref 标记)

  • ② Ref 属性是一个函数。
class Children extends React.Component{  render=()=><div>hello,world</div>
}/* TODO: Ref属性是一个函数 */
export default class Index extends React.Component{currentDom = nullcurrentComponentInstance = nullcomponentDidMount(){console.log(this.currentDom)console.log(this.currentComponentInstance)}render=()=> <div><div ref={(node)=> this.currentDom = node }  >Ref模式获取元素或组件</div><Children ref={(node) => this.currentComponentInstance = node  }  /></div>
}

  • ③ Ref属性是一个ref对象。
class Children extends React.Component{  render=()=><div>hello,world</div>
}export default class Index extends React.Component{currentDom = React.createRef(null)currentComponentInstance = React.createRef(null)componentDidMount(){console.log(this.currentDom)console.log(this.currentComponentInstance)}render=()=> <div><div ref={ this.currentDom }  >Ref对象模式获取元素或组件</div><Children ref={ this.currentComponentInstance }  /></div>
}

高级用法1:forwardRef 转发 Ref

高级用法2:ref实现组件通信

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/671339.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

e^{ix} 的 conjugate value(复共轭)

e^{ix} 的 conjugate value 正文实数的复共轭 e i x e^{ix} eix 的复共轭推导 正文 这里简单说明一下 e i x e^{ix} eix 的复共轭。 实数的复共轭 首先&#xff0c;我们知道&#xff0c;所谓复共轭是针对复数而言的。对于实数&#xff0c;我们知道&#xff0c;实数集被复数…

年假作业day2

1.打印字母图形 #include<stdio.h> #include<string.h> int main(int argc, const char *argv[]) { int i,j; char k; for(i1;i<7;i) { for(j1;j<i;j) { printf("%c",_); } for(j0,…

2.6学习总结

2.6 1.蓝桥公园 2.路径 3.打印路径 4.【模板】Floyd Floyd算法&#xff1a; 是一种多源的最短路径算法&#xff0c;经过一次计算可以得到任意两个点之间的最短路径。 这种算法是基于动态规划的思想&#xff1a; m[i][j]表示从i到j这条边的距离&#xff0c;dp[k][i][j]表示从…

【Vue3】解决路由缓存问题(响应路由参数的变化)

官方文档解释&#xff1a; 解决问题的思路: 让组件实例不复用,强制销毁重建监听路由变化,变化之后执行数据更新操作 方案一&#xff1a;给router-view添加key 以当前路由完整路径为key 的值&#xff0c;给router-view组件绑定 <RouterView :key"$route.fullPath&qu…

如何使用Docker部署Nginx容器实现无公网ip远程访问本地服务

文章目录 1. 安装Docker2. 使用Docker拉取Nginx镜像3. 创建并启动Nginx容器4. 本地连接测试5. 公网远程访问本地Nginx5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 在开发人员的工作中&#xff0c;公网远程访问内网是其必备的技术需求之一。对于…

mvn常见报错:Failed to read artifact descriptor for 解决

问题&#xff1a; mvn打包时报错&#xff1a;Failed to read artifact descriptor for 产生原因&#xff1a; 项目打包时所需的依赖包不存在本地仓库&#xff0c;或本地仓库文件存在问题。 解决方法&#xff1a; 检查仓库可用性&#xff1a; 确保在Maven设置或pom.xml中指定…

引入BertTokenizer出现OSError: Can‘t load tokenizer for ‘bert-base-uncased‘.

今天在跑一个模型的时候出现该报错&#xff0c;完整报错为&#xff1a; OSError: Cant load tokenizer for bert-base-uncased. If you were trying to load it from https://huggingface.co/models, make sure you dont have a local directory with the same name. Otherwis…

npm 上传一个自己的应用(3) 在项目中导入及使用自己上传到NPM的工具

上文 npm 上传一个自己的应用(2) 创建一个JavaScript函数 并发布到NPM 我们创建了一个函数 并发上了npm 最后 我们这里 我们可以看到它的安装指令 这里 我们可以打开一个vue项目 终端输入 我们的安装指令 npm i 自己的包 如下代码 npm i grtest我们在 node_modules目录 下…

Python 套接字详解:与网络通信的温柔邂逅

网络世界&#xff0c;犹如一片无垠的海洋&#xff0c;充满了无限的可能性和无尽的探索。而在这个浩瀚的网络宇宙中&#xff0c;Python 语言以其简洁优雅、功能丰富而备受青睐。在 Python 的世界里&#xff0c;有一个神奇的工具&#xff0c;它就像是一座桥梁&#xff0c;将不同的…

dbeaver免费、跨平台数据管理软件

下载 dbeaver是一款的数据库连接工具&#xff0c;免费&#xff0c;跨平台。 官网&#xff1a;DBeaver Community | Free Universal Database Tool下载地址&#xff1a;Download | DBeaver Community 点击下载 安装 修改安装路径 点击安装 点击完成 使用 连接mysql 已连接 点…

JAVASE进阶:一文精通Stream流+函数式编程

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;JAVASE进阶&#xff1a;源码精读——HashMap源码详细解析 &#x1f4da;订阅专栏&#xff1a;JAVASE进阶 希望文章对你们有所帮助…

万物皆可问 — 私有部署网易有道QAnything

什么是 QAnything&#xff1f; QAnything&#xff08;Question and Answer based on Anything&#xff09;是一个本地知识库问答系统&#xff0c;旨在支持多种文件格式和数据库&#xff0c;允许离线安装和使用。使用QAnything&#xff0c;您可以简单地删除本地存储的任何格式的…

Linux学习

1 Linux的目录结构介绍 bin存放常用的命令etc存放配置文件bootlinux启动的文件home存放用户lib存放动态库&#xff0c;给应用程序使用lostfound一般是空的&#xff0c;但系统异常关机会产生文件media自动挂载&#xff0c;如u盘&#xff0c;光盘mnt手动挂载&#xff0c;一般自己…

利用Excel爬取网页数据

想要获取网页上的表格数据&#xff0c;可以通过Excel自带的功能&#xff0c;从网站导入数据&#xff0c;并且可以实时刷新最新数据。具体步骤如下&#xff1a; 1、新建Excel&#xff0c;打开&#xff0c;选择【数据】-【自网站】 2、在弹出的对话框中输入目标网址&#xff0c;…

子集枚举介绍

集合枚举的意思是从一个集合中找出它的所有子集。集合中每个元素都可以被选或不选&#xff0c;含有n个元素的集合总共有个子集&#xff08;包括全集和空集&#xff09; 例如考虑集合和它的4个子集、、、&#xff0c;按照某个顺序&#xff0c;把全集A中的每个元素在每个子集中的…

LeetCode:9.回文数,对整数的反转操作

博主本想找个简单的题水一下&#xff0c;结果太久没写这块的代码&#xff0c;直接写着宕机着&#xff0c;十分难受&#xff0c;最后还调试了几下&#xff0c;悲&#xff0c; 目录 题目&#xff1a; 思路&#xff1a; 官方代码&#xff08;反转一半的&#xff09;&#xff1a…

酷开科技,打造非凡的生活体验

酷开科技&#xff0c;作为一家专注于智能电视操作系统研发及智能电视运营增值服务的高科技企业&#xff0c;始终致力于为消费者提供非凡的生活体验。通过不断创新的技术和产品&#xff0c;酷开科技为消费者们带来了便捷、舒适、个性化的智能生活。 首先&#xff0c;酷开科技在智…

【Linux笔记】文件系统与软硬链接

一、文件系统概述 1.1、先来聊一聊“磁盘” 在讲解文件系统之前&#xff0c;我觉得有必要先聊一下“磁盘”&#xff0c;因为我觉得如果弄懂了磁盘的存储原理&#xff0c;大家可能更容易理解文件系统是怎么管理数据的&#xff0c;并且理解计算机是怎么将磁盘抽象到文件系统的。…

Lua函数进阶

函数是值类型 《programming in lua》里面举了一个非常生动的例子&#xff1a; a {p print} a.p("Hello World") --> Hello World print math.sin -- print now refers to the sine function a.p(print(1)) --> 0.841470 sin a.p -- sin now refers …

符号绑定和函数绑定

符号绑定 其实我们平常定义的变量等&#xff0c;在编译之后都会被转化为地址&#xff0c;这些变量我们称之为符号。 我们在程序运行的时候&#xff0c;使用变量&#xff0c;其实就是从变量转换的地址中找到内存中存储的数据。符号绑定其实就是: 将我们程序中使用到的变量名等…