当前位置: 首页 > news >正文

React Hooks小记(三)_forwardRef

forwardRef

【写在前面】

​ 1、ref 的作用是获取实例,但由于函数组件不存在实例,因此无法通过 ref 获取函数组件的实例引用,而 React.forwardRef 就是用来解决这个问题的。

​ 2、React.forwardRef 会创建一个 React 组件,这个组件能够将其接收到的 ref 属性转发到自己的组件树。

1. 无法直接使用 ref 引用函数式组件

在下面的例子中,父组件 Father 想通过 ref 引用子组件 Child,此时代码会报错,因为函数式组件没有实例对象,无法被直接引用:

// 父组件
export const Father: React.FC = () => {const childRef = useRef()return (<><h1>Father 父组件</h1><hr /><!-- 下面这行代码中的 ref 使用不正确,因为 Child 组件是函数式组件,无法被直接引用 --><Child ref={childRef} /></>)
}

Child 组件的定义如下:

// 子组件(实现点击按钮,数值加减的操作)
const Child: React.FC = () => {const [count, setCount] = useState(0)const add = (step: number) => {setCount((prev) => (prev += step))}return (<><h3>Child 子组件 {count}</h3><button onClick={() => add(-1)}>-1</button><button onClick={() => add(1)}>+1</button></>)
}

注意:上面的代码无法正常运行,会在终端提示如下的 Warning 警告:

Warning:
Function components cannot be given refs. Attempts to access this ref will fail.
Did you mean to use React.forwardRef()?

错误提示中有解决此问题的关键提示:Did you mean to use React.forwardRef()?

2. forwardRef 的基本使用

在使用函数组件时,我们无法直接使用 ref 引用函数式组件,下面的代码会产生报错:

const childRef = useRef(null) 
return <Child ref={inputRef} />

因为默认情况下,你自己的组件不会暴露它们内部 DOM 节点的 ref。

正确的方法是使用 React.forwardRef() 把函数式组件包装起来

例如 Child 子组件的代码如下:

// 被包装的函数式组件,第一个参数是 props,第二个参数是转发过来的 ref
const Child = React.forwardRef((props, ref) => {// 省略子组件内部的具体实现
}) 

然后,在父组件 Father 中,就可以给子组件 Child 绑定 ref 了:

// 父组件
export const Father: React.FC = () => {const childRef = useRef()// 按钮的点击事件处理函数const onShowRef = () => {console.log(childRef.current)}return (<><h1>Father 父组件</h1>{/* 点击按钮,打印 ref 的值 */}<button onClick={onShowRef}>show Ref</button><hr /><Child ref={childRef} /></>)
}

注意:此时父组件 Father 中获取到的 ref.current 是 undefined,因为子组件 Child 没有向外暴露任何自己内部的东西。

相关文章:

React Hooks小记(三)_forwardRef

forwardRef 【写在前面】 ​ 1、ref 的作用是获取实例&#xff0c;但由于函数组件不存在实例&#xff0c;因此无法通过 ref 获取函数组件的实例引用&#xff0c;而 React.forwardRef 就是用来解决这个问题的。 ​ 2、React.forwardRef 会创建一个 React 组件&#xff0c;这个组…...

面试复习记录

六级终于结束了&#xff0c;之前背的八股几乎也忘得差不多了&#xff0c;今天开始继续准备秋招&#xff0c;以下是每天的安排&#xff0c;会按时更新&#xff0c;就当是一种对自己的督促&#xff0c;也欢迎小伙伴们一起来互相监督。 2024.6.16 力扣&#xff1a;sql基础题库50…...

块级元素与行内元素详解

在网页设计与开发中&#xff0c;元素根据其在页面布局中的表现可分为两大类&#xff1a;块级元素&#xff08;Block-level Elements&#xff09;和行内元素&#xff08;Inline Elements&#xff09;。理解它们的特性和使用规则对于构建结构清晰、布局合理的网页至关重要。 块级…...

Kotlin编程实践-【Java如何调用Kotlin中带默认值参数的函数】

问题 如果你有一个带有默认参数值的 Kotlin 函数&#xff0c;如何从 Java 调用它而无须为每个参数显式指定值&#xff1f; 方案 为函数添加注解JvmOverloads。 也就是为Java添加重载方法&#xff0c;这样Java调用Kotlin的方法时就不用传递全部的参数了。 示例 在 Kotlin …...

中国城市统计年鉴(1985-2023年)

数据年限&#xff1a;1985-2023 数据格式&#xff1a;pdf、excel 数据内容&#xff1a;共分四个部分 第一部分是全国城市行政区划&#xff0c;列有不同区域、不同级别的城市分布情况&#xff1b; 第二、三部分分别是地级以上城市统计资料和县级城市统计资料&#xff0c;具体包括…...

RestTemplate远程请求的艺术

1 简说 编程是一门艺术,追求优雅的代码就像追求优美的音乐。 很多有多年工作经验的开发者,在使用RestTemplate之前常常使用HttpClient,然而接触了RestTemplate之后,却愿意放弃多年相处的“老朋友”,转向RestTemplate。那么一定是RestTemplate有它的魅力,有它的艺术风范。…...

Spring 整合 MyBatis 底层源码解析

大家好&#xff0c;我是柳岸花开。今天我们要讲的是 Spring 整合 MyBatis 的底层源码解析。希望大家能更深入理解 Spring 和 MyBatis 的整合原理&#xff0c;并应用到实际项目中。 由很多框架都需要和Spring进行整合&#xff0c;而整合的核心思想就是把其他框架所产生的对象放到…...

LeetCode 189.轮转数组

1.这个题我用的方法比较巧妙&#xff0c;大家如果觉得好的话&#xff0c;就给个免费的赞吧^ _ ^,谢谢了。 void reverse(int* nums,int left,int right) {while(left < right){int a nums[left];nums[left] nums[right];nums[right] a;left;right--;} } void rotate(int…...

JDK17 你的下一个白月光

JDK版本升级的非常快&#xff0c;现在已经到JDK20了。JDK版本虽多&#xff0c;但应用最广泛的还得是JDK8&#xff0c;正所谓“他发任他发&#xff0c;我用Java8”。 但实际情况却不是这样&#xff0c;越来越多的java工程师拥抱 JDK17&#xff0c;于是了解了一下 JDK17新语法&a…...

springboot优雅shutdown时如何保障异步线程的安全

我前面写了一篇springboot优雅shutdown的文章&#xff0c;看起来一切很美好。 https://blog.csdn.net/chenshm/article/details/139640775 那是因为没有进行多线程测试。如果一个请求中包括阻塞线程&#xff08;主线程&#xff09;和非阻塞线程&#xff08;异步线程&#xff09…...

C++格式化库fmt使用方法

1. 格式化库fmt简介 fmt github地址 api说明 格式化参数说明 内容的格式化&#xff0c;体现在代码中主要表现为字符串、基本类型、自定义类型的拼接。例如说打印日志、拼接变量等。C中我们会经常使用类似printf,snprintf(C风格使用不方便),std::string.append(繁琐), std::io…...

HTML 颜色名:网页设计的调色板

HTML 颜色名:网页设计的调色板 在网页设计和开发中,颜色是一个关键元素,它不仅影响视觉效果,还能传达情感和品牌信息。HTML 颜色名是用于在 HTML 和 CSS 代码中指定颜色的预定义名称。这些颜色名易于记忆,方便设计师和开发者快速选择和应用颜色。本文将详细介绍 HTML 颜色…...

12306 火车票价格解析 (PHP 解析)

1. 从接口拿数据 日期 出发站 终点站 都填上 xxx/otn/leftTicketPrice/queryAllPublicPrice?leftTicketDTO.train_date2024-06-15&leftTicketDTO.from_stationBJP&leftTicketDTO.to_stationSJP&purpose_codesADULT 返回的数据是这样的 {"validateMess…...

了解统计学中不同类型的分布

目录 一、说明 二、均匀分布&#xff1a; 三、机器学习和数据科学中的均匀分布示例&#xff1a; 3.1 对数正态分布&#xff1a; 3.2 机器学习和数据科学中的对数正态分布示例&#xff1a; 四、 帕累托分布 4.1 什么是幂律&#xff1f; 4.2 机器学习和数据科学中的帕累托分布示例…...

k8s-CCE创建工作负载变量引用

CCE创建工作负载变量引用 背景&#xff0c;看到cce创建负载时会生成变量&#xff0c;如下。在skywaking-agent的使用&#xff0c;想要调用cce负载变量生成service_name。 -Dskywalking.agent.authentication里含有敏感信息需要写到配置项。简单粗糙的都写到配置项好像不合适。…...

后端主流框架--Spring02

前言:上篇关于Spring的文章介绍了一些Spring的基本知识&#xff0c;此篇文章主要分享一下如何配置Spring环境&#xff0c;如何注入等。 Spring项目构建 导入Spring相关JAR包 <dependency><groupId>org.springframework</groupId><artifactId>spring…...

[数据集][目标检测]减速带检测数据集VOC+YOLO格式5400张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;5400 标注数量(xml文件个数)&#xff1a;5400 标注数量(txt文件个数)&#xff1a;5400 标注…...

分析Linux操作指令及使用场景与频率分析 持续更新

本篇主要针对在日常工作与学习中使用较多的linux指令的使用方法以及使用频次进行分析与讲解&#xff0c;旨在能够更好的掌握这些必备的技能。 linux指令非常的多&#xff0c;如果要记住所有的指令使用方法是非常困难的且要花费很长的时间&#xff0c;很多人习惯离开使用去通篇…...

Redis 字符串(String)

Redis 字符串(String) 介绍 Redis是一种开源的、高性能的键值数据库,它支持多种类型的数据结构,其中字符串(String)是Redis中最基本的数据类型之一。字符串类型可以存储任何形式的字符串,包括文本、序列化的对象或二进制数据。在Redis中,字符串类型的最大容量为512MB。 …...

第一篇:容器化的未来:从Docker的革命到云原生架构

容器化的未来&#xff1a;从Docker的革命到云原生架构 1. 引言 在当今快速演进的技术领域&#xff0c;容器化技术已经成为云计算和微服务架构的重要组成部分。该技术以其高效的资源利用率、快速的部署能力和卓越的隔离性能&#xff0c;彻底改变了软件开发和部署的方式。容器化…...

交互式社会工程学攻击的演进与防御:基于2025年语音钓鱼激增现象的深度分析

摘要 随着人工智能生成内容&#xff08;AIGC&#xff09;技术的成熟与普及&#xff0c;网络攻击的初始访问向量正经历从自动化、非交互式向高度个性化、实时交互式的范式转变。本文基于Google Cloud Mandiant发布的《M-Trends 2026》报告数据&#xff0c;深入剖析了2025年语音钓…...

XUnity.AutoTranslator IL2CPP兼容性深度解析:从诊断到根治的终极指南

XUnity.AutoTranslator IL2CPP兼容性深度解析&#xff1a;从诊断到根治的终极指南 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator XUnity.AutoTranslator作为Unity游戏自动翻译的标杆工具&#xff0c;在5…...

开源模型运维实践:雯雯的后宫Z-Image-瑜伽女孩Xinference日志监控与告警配置

开源模型运维实践&#xff1a;雯雯的后宫Z-Image-瑜伽女孩Xinference日志监控与告警配置 1. 引言&#xff1a;当你的AI画师“罢工”了怎么办&#xff1f; 想象一下这个场景&#xff1a;你刚部署好一个能生成精美瑜伽女孩图片的AI模型&#xff0c;兴致勃勃地准备创作。你输入了…...

RWKV7-1.5B-g1a入门必看:轻量中文问答/文案续写/摘要生成快速上手指南

RWKV7-1.5B-g1a入门必看&#xff1a;轻量中文问答/文案续写/摘要生成快速上手指南 1. 模型简介 RWKV7-1.5B-g1a是一个基于RWKV-7架构的多语言文本生成模型&#xff0c;特别适合中文场景下的基础问答、文案续写、简短总结和轻量对话任务。这个1.5B参数的版本在保持良好生成质量…...

MedGemma-X性能优化:基于CUDA的医疗影像加速处理

MedGemma-X性能优化&#xff1a;基于CUDA的医疗影像加速处理 1. 当医生等结果的时间&#xff0c;能不能再短一点&#xff1f; 上周陪家人做肺部CT复查&#xff0c;从扫描结束到拿到报告&#xff0c;中间隔了近40分钟。放射科医生说&#xff0c;现在AI辅助系统已经能帮着初筛&…...

PCB画板时的层数设置

在PCB设计领域&#xff0c;当我们说“几层板”的时候&#xff0c;指的就是电气层的数量&#xff08;也就是导电的铜箔层数&#xff09;。助焊层、阻焊层、丝印层、钻孔图这些&#xff0c;虽然也叫“层”&#xff0c;但它们是非电气层&#xff08;或称辅助层&#xff09;&#x…...

BEV感知算法实战:从Mono3D到PointPillars的自动驾驶3D目标检测全解析

BEV感知算法实战&#xff1a;从Mono3D到PointPillars的自动驾驶3D目标检测全解析 自动驾驶技术的核心挑战之一是如何让车辆准确理解周围环境。在众多感知方案中&#xff0c;鸟瞰图&#xff08;BEV&#xff09;感知因其独特的空间表示优势&#xff0c;正在成为行业主流技术路线。…...

基于RS485(Modbus RTU)的工业RFID读写器CK-FR03-A01与三菱FX5U PLC的通信配置与实战应用

1. 工业RFID与PLC通信的基础认知 在自动化产线上&#xff0c;RFID读写器就像给物料贴"身份证"的智能哨兵&#xff0c;而PLC则是控制流水线动作的大脑。CK-FR03-A01这款工业级RFID读写器&#xff0c;通过RS485接口采用Modbus RTU协议与三菱FX5U PLC对话&#xff0c;就…...

OpenClaw+Qwen3.5-4B-Claude:3类逻辑任务自动化实测对比

OpenClawQwen3.5-4B-Claude&#xff1a;3类逻辑任务自动化实测对比 1. 测试背景与实验设计 去年在尝试用OpenClaw自动化处理技术文档时&#xff0c;我发现原生大模型虽然能完成基础任务&#xff0c;但在需要多步推理的场景中经常出现"跳步"或"逻辑断层"。…...

通信网络升级与算力基建驱动,稳增前行:全球光纤光缆油膏2026-2032年CAGR4.2%,2032年锚定3.15亿美元

QYResearch调研显示&#xff0c;2025年全球光纤光缆油膏市场规模大约为2.37亿美元&#xff0c;预计2032年将达到3.15亿美元&#xff0c;2026-2032期间年复合增长率&#xff08;CAGR&#xff09;为4.2%。产品定义&#xff1a;精细配方&#xff0c;保障性能光纤油膏&#xff0c;简…...