React@16.x(12)ref 转发-forwardRef
目录
- 1,介绍
- 2,类组件如何使用
- 4,应用场景-高阶组件HOC
1,介绍
上篇文章中提到,ref
只能对类组件使用,不能对函数组件使用。
而 ref
转发可以对函数组件实现类似的功能。
使用举例:
import React, { Component } from "react";function CompA(props, ref) {return (<h1><div ref={ref}>组件A</div><span>{props.desc}</span></h1>);
}const NewCompA = React.forwardRef(CompA);export default class App extends Component {refA = React.createRef();componentDidMount() {console.log(this.refA);}render() {return <NewCompA ref={this.refA} desc="测试"></NewCompA>;}
}
打印结果
解释:
通过 React.forwardRef()
来实现 ref
转发。其实就是通过 HOC:参数为组件,返回新组件。
特点:
- 参数只能是函数组件,并且该函数接收2个参数:
- 参数一不变,依旧是
props
; - 参数二就是一个
ref: {current: null}
,也就是React.forwardRef()
返回的新组件接收的ref
属性。它让使用者来决定作为谁的引用。比如上面的例子中,就作为一个子元素的引用。
- 参数一不变,依旧是
- 返回的新组件,和原来的函数组件没有任何区别,只是可以传递
ref
属性了。
2,类组件如何使用
既然明确规定了 React.forwardRef()
的参数只能是函数,该函数的参数也是确定的,那可以将类组件包装一层来达到目的。
更改上面的例子如下:
class CompA extends Component {render() {return (<h1><div ref={this.props.forwardRef}>组件A</div><span>{this.props.desc}</span></h1>);}
}// forwardRef 这个属性名是随意的,只是约定俗成为这个单词了。
const NewCompA = React.forwardRef((props, ref) => {return <CompA {...props} forwardRef={ref}></CompA>;
});
4,应用场景-高阶组件HOC
在之前的高阶组件HOC中,有个问题没有解决:
const Alog = withLog(CompA)
此时使用的是
Alog
组件,那如何获取原组件CompA
的方法和属性呢?
对Alog
使用ref
获取的并不是是CompA
的组件实例。
可以使用 ref 转发解决:
源代码:
export default function withLog(Comp) {return class LogWrapper extends Component {componentDidMount() {console.log(`${Comp.name}组件被创建了`);}componentWillUnmount() {console.log(`${Comp.name}组件被销毁了`);}render() {return <Comp {...this.props} />;}};
}
修改后:
import React, { Component } from "react";export default function withLog(Comp) {class LogWrapper extends Component {componentDidMount() {console.log(`${Comp.name}组件被创建了`);}componentWillUnmount() {console.log(`${Comp.name}组件被销毁了`);}render() {const { forwardRef, ...rest } = this.props;return <Comp ref={forwardRef} {...rest} />;}}return React.forwardRef((props, ref) => {return <LogWrapper {...props} forwardRef={ref}></LogWrapper>;});
}
这样在使用 withLog
时,并不会影响对源组件 ref
的获取。
以上。
相关文章:

React@16.x(12)ref 转发-forwardRef
目录 1,介绍2,类组件如何使用4,应用场景-高阶组件HOC 1,介绍 上篇文章中提到,ref 只能对类组件使用,不能对函数组件使用。 而 ref 转发可以对函数组件实现类似的功能。 使用举例: import Re…...
电脑世界的大冒险:用人体比喻让孩子轻松理解电脑20240603
电脑世界的大冒险:用人体比喻让孩子轻松理解电脑 作为一名在IT行业的老程序猿,我见证了电脑技术的飞速发展,也亲身体验了科技给生活带来的翻天覆地的变化。然而,在这个日新月异的数字时代,我意识到,与孩子…...

构建智慧银行保险系统的先进技术架构
随着科技的不断发展,智慧银行保险系统正日益受到关注。在这个数字化时代,构建一个先进的技术架构对于智慧银行保险系统至关重要。本文将探讨如何构建智慧银行保险系统的先进技术架构,以提升服务效率、降低风险并满足客户需求。 ### 1. 智慧银…...

来自大厂硬盘的降维打击!当希捷酷玩520 1TB SSD卷到369,请问阁下该怎么应对?
来自大厂硬盘的降维打击!当希捷酷玩520 1TB SSD卷到369,请问阁下该怎么应对? 哈喽小伙伴们好,我是Stark-C~ 今年4月份的时候因为电脑上的游戏盘突然挂掉,为了性价比选购了希捷酷玩520 1TB SSD,同时我也是…...
什么是封装?为什么是要封装?
封装是面向对象编程中的一种核心概念,它是将数据和操作数据的方法结合起来,形成一个整体,对外只暴露必要的接口,隐藏内部的具体实现细节。 封装的目的是为了实现信息隐藏和代码的模块化,具体原因如下: 1.…...

Spring Cloud | 服务 “注册与发现“ 框架 : Eureka框架
目录: Eureka 的 "工作机制" :一、Eureka 的 "工作原理" ( 两大组件 ) :1.1 Eureka Server ( 服务注册中心 )1.2 Eureka Client ( 服务/服务实例,其存在 "两种角色" : ①服务提供者 ②服务消费者 ) :Eureka Client 的 含义…...
编译链接问题
问题描述 C语言在编译的时候,提示链接的时候没有找到相应的方法 问题分析 代码文件结构: test.c test/1.c test/1.h test.c代码: #include “test/1.h” void main() { hello(); } test/1.c代码: void hello() { printf(“hel…...
电涡流的形成范围
电涡流的形成范围涉及多个方面,主要受到导体材料、磁场变化速度、导体形状和尺寸以及磁场方向的影响。以下是对这些因素的详细分析: 导体材料:金属和合金是最容易产生电涡流的材料,而非金属材料(如陶瓷、塑料等&#…...

学业辅导导师:文心一言智能体详细介绍和开发
一、前言 本期题目 开发方向:学习成长类 解读: AI技术在学习成长方向的应用正日益增多,本期赛题需围绕该方向开发智能体包括但不限于:作文辅导助手、个性化学习助手、考试助手、各垂类教育内容专家等 二、我的智能体:学业辅导…...
AI与NLP的完美结合:揭秘ChatGPT
AI与NLP的完美结合:揭秘ChatGPT 一、AI大模型的发展历程 AI大模型的发展可追溯到早期的深度学习技术。深度学习通过多层神经网络处理复杂的数据模式,显著提升了图像识别、语音识别等领域的性能。随后,研究人员将注意力转向NLP,开…...
提交一个Bug需要哪些信息?
软件在使用过程中存在的任何问题都叫做软件的缺陷,简称Bug,我认为要提交一个Bug首先得将这个Bug的核心内容说明一下,比如Bug的核心问题是什么、产生的前提、预期结果是什么、但实际结果是什么、以及附上一个证据图片。 然后提交时需要Bug报告…...

【Hive SQL 每日一题】统计每月用户购买商品的种类分布
文章目录 测试数据需求说明需求实现 测试数据 -- 创建 orders 表 DROP TABLE IF EXISTS orders; CREATE TABLE orders (order_id INT,user_id INT,product_id INT,order_date STRING );-- 插入 orders 数据 INSERT INTO orders VALUES (101, 1, 1001, 2023-01-01), (102, 1, 1…...

Nginx01-HTTP简介与Nginx简介(安装、命令介绍、目录介绍、配置文件介绍)
目录 HTTP简介HTTP原理查看访问网站的详细流程curl -vwget --debug 查看网站访问量HTTP协议版本HTTP协议交互HTTP 请求请求报文起始行请求头 HTTP响应响应报文起始行响应头 Nginx常见的Web服务常见网站服务 安装NginxNginx目录结构Nginx启动管理Nginx常用命令 Nginx配置文件主配…...
JAVA: 抽象类和接口
Java中可以可以定义不含方法体的方法,方法的方法体由其所在类的子类根据实际需求去实现,这样的方法称为抽象方法(Abstract Method),包含抽象方法的类必须是抽象类(Abstract Class)。 抽象方法和…...

风景的短视频一分钟:成都科成博通文化传媒公司
风景的短视频一分钟:时光凝固的画卷 在快节奏的现代生活中,我们常常被繁忙和琐碎所困扰,渴望在喧嚣中找到一丝宁静与美好。而风景的短视频,正是这样一份能够让我们在短时间内沉浸于自然之美的奇妙礼物。成都科成博通文化传媒公司…...

力扣--双指针15.三数之和
详细思路 排序数组:首先对数组 nums 进行排序,目的是为了方便后续使用双指针查找和避免重复结果。遍历数组:使用一个 for 循环从头遍历到倒数第三个元素。i 表示当前固定的元素。 跳过重复元素:如果当前元素 nums[i] 与前一个元素…...

C++ A (1020) : 幂运算
文章目录 一、题目描述二、参考代码 一、题目描述 二、参考代码 #include<bits/stdc.h> using namespace std; typedef long long ll;void qq(ll a, ll b, ll m) {if (a 0) cout << 0 << endl;;ll out 1;a % m;while (b > 0){if (b & 1)//奇数的最…...

GVM: Golang多版本管理利器
本文介绍了 Go Version Manager 的功能和使用方法,介绍了如何通过 GVM 在系统上安装和管理多个 Go 语言版本。原文: GVM: Go Version Manager, for Golang manage multiple versions Go 版本管理器(GVM,Go Version Manager)是一款…...
AlmaLinux9安装zabbix6.4
文章目录 [toc]一、配置源1)查看系统2)配置源 二、安装zabbix三、安装数据库1)卸载mariadb2)安装MySQL3)配置开启自启动4)MySQL设置root密码 四、导入数据五、配置zabbix六、参考地址六、参考地址 一、配置…...
基于翔云C#语言的身份证实名认证接口开发示例
现如今,安全与便捷成为了互联网服务的两大关键词。为了进一步提升用户体验并加强网络安全管理,国内多家主流App近日宣布完成一项重要功能升级——集成身份证实名认证系接口。这一举措标志着用户在进行App注册时,将享受到更加高效、安全的身份…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...

龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...

2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...