【解决方案】【最佳实践】React高阶组件中Refs 不会被传递的问题
大家好,我是DX3906。
最近遇到React高阶组件中Refs 不会被传递的问题。
在这里总结一下解决方案和解决思路:主要是通过从内向外和从外向内2种思路来分析解决的。
目录
前言
解决方案一:React.forwardRef
解决方案二:使用props传递ref
结语
前言
虽然高阶组件的约定是将所有 props 传递给被包装组件,但这对于 refs 并不适用。那是因为 ref
实际上并不是一个 prop - 就像 key
一样,它是由 React 专门处理的。如果将 ref 添加到 HOC 的返回组件中,则 ref 引用指向容器组件,而不是被包装组件。
在React中,Ref是一个React对象,它用于访问DOM节点或组件实例。当你使用高阶组件封装组件时,被封装的组件的Ref可能不会被传递到高阶组件的外部。这是因为高阶组件创建了一个包装组件,它接收原始组件作为prop,并且通常会创建一个新的ref来引用它。
解决方案一:React.forwardRef
解决这个问题的方法之一是使用React的React.forwardRef
函数。forwardRef
允许你将一个ref传递给子组件,这样即使组件被高阶组件封装,ref也能正确地传递到最底层的组件。
下面是一个使用React.forwardRef
的示例:
import React, { forwardRef } from 'react';const EnhancedComponent = React.forwardRef((props, ref) => {// 将ref传递给被封装的组件return <WrappedComponent {...props} forwardedRef={ref} />;
});const WrappedComponent = forwardRef((props, forwardedRef) => {// 使用forwardedRef来访问DOM或组件实例return <div ref={forwardedRef}>...</div>;
});// 使用时,ref将被传递到WrappedComponent的div元素
const ref = React.createRef();
<EnhancedComponent ref={ref} />;
在这个例子中,EnhancedComponent
是一个高阶组件,它使用forwardRef
来接收一个ref,并将其传递给WrappedComponent
。WrappedComponent
也使用forwardRef
来接收这个ref,并将其应用到内部的DOM元素上。
使用forwardRef
可以确保无论组件被多少层高阶组件封装,ref都能正确地传递到最底层的组件。这使得你可以在需要的时候访问DOM节点或组件实例,而不受高阶组件的影响。
解决方案二:使用props传递ref
第一步:我们把ref 添加到 HOC 的返回组件中,则 ref 引用指向容器组件,而不是被包装组件。
第二步:在HOC 把被组装的组件的ref赋值给高阶组件外层的一个instance对象。然后使用第一步中的ref调用instance对象。
具体案例如下:
function withSubscription(WrappedComponent, selectData) {return class extends React.Component {constructor(props) {super(props);this.state = {data: selectData(props) // 初始状态};this.instance;}componentDidMount() {// 订阅数据源const { subscribe } = this.props;subscribe(data => this.setState({ data }));}componentWillUnmount() {// 取消订阅const { unsubscribe } = this.props;unsubscribe();}render() {// 将数据和原始props传递给WrappedComponentreturn <WrappedComponent ref={(node)=>{this.instance = node}} {...this.props} />;}};
}
import React,{useEffect,useRef} from "react"
function WithShow(props) {let cusRef = useRef(null);useEffect(()=>{cusRef.current.instance.被包装组件的方法()})// 使用高阶组件const MyComponentWithData = withSubscription(MyComponent, props => {// 根据props选择数据return someDataSource.getData(props.id);});// 然后在你的应用中使用MyComponentWithDatareturn() {// 获取Hoc外层组件的refreturn <MyComponentWithData ref={cusRef} {...this.props} />;}};
}
结语
🔥如果此文对你有帮助的话,欢迎💗关注、👍点赞、⭐收藏、✍️评论,支持一下博主~
相关文章:
【解决方案】【最佳实践】React高阶组件中Refs 不会被传递的问题
大家好,我是DX3906。 最近遇到React高阶组件中Refs 不会被传递的问题。 在这里总结一下解决方案和解决思路:主要是通过从内向外和从外向内2种思路来分析解决的。 目录 前言 解决方案一:React.forwardRef 解决方案二:使用prop…...
SRAM和DRAM
1.SRAM(静态RAM) 把存放一个二进制位的物理器件称为存储元,它是存储器最基本的构件。 地址码相同的多个存储元构成一个存储单元。 存储单元的集合构成存储体。 静态RAM的存储元是用双稳态触发器(六晶体管MOS)来记忆…...
浅析Spring中Async注解底层异步线程池原理
一、前言 开发中我们经常会用到异步方法调用,具体到代码层面,异步方法调用的实现方式有很多种,比如最原始的通过实现Runnable接口或者继承Thread类创建异步线程,然后启动异步线程;再如,可以直接用java.uti…...
sqli-labs 靶场 less-7 第七关详解:OUTFILE注入与配置
SQLi-Labs是一个用于学习和练习SQL注入漏洞的开源应用程序。通过它,我们可以学习如何识别和利用不同类型的SQL注入漏洞,并了解如何修复和防范这些漏洞。Less 7 SQLI DUMB SERIES-7判断注入点 进入页面中,并输入数据查看结果。 发现空数据提…...
AIGC新秀亮相,哪款大模型产品最得你心?
AIGC新秀亮相,哪款大模型产品最得你心? 近日,腾讯元宝APP的正式上线,为国内大模型AIGC产品市场增添了一名新成员。 这些所谓的“全能”大模型产品,凭借其强大的生成能力和广泛的应用场景,正逐渐改变我们的…...
RabbitMQ消息的可靠传输和防止消息丢失
在Spring Cloud项目中,为了确保RabbitMQ消息的可靠传输和防止消息丢失,需要考虑以下几个方面: 消息持久化:确保消息在RabbitMQ中持久化。队列持久化:确保队列是持久化的。发布确认:使用发布确认机制确保消…...
.net8系列-图文并茂手把手教你使用Nlog记录.net日志
Nlog是什么? NLog是一个为.NET平台设计的灵活且免费的日志记录库。它适用于包括.NET Framework、.NET Core和.NET Standard在内的多种.NET环境。 Nlog有什么好处或者特点? 配置灵活:NLog允许开发者通过配置文件(通常是NLog.conf…...
课时158:脚本发布_简单脚本_远程执行
2.1.3 远程执行 学习目标 这一节,我们从 基础知识、简单实践、小结 三个方面来学习 基础知识 简介 有时候,我们需要通过远程方式到另外一台主机进行脚本的执行 格式:ssh 远程主机登录用户名远程主机ip地址 "执行命令"效果 [r…...
3dmax2025能用云渲染吗?2025最新云渲染渲染100使用方法
3dmax2025还没用上云渲染?简单3步用上云渲染。 第一步,打开浏览器搜索渲染100,并进入下载客户端并安装 第二步,打开已安装的客户端进行安装,点击登录,未登录注册个账号即可(注册账号时邀请码填…...
从零开始学GeoServer源码(一)(搭建开发环境Win10+IDEA23.3.5+jdk11+geoserver2.24.x)
搭建开发环境 参考资料 0、基础环境准备0.1、idea0.2、jdk0.3、源码 1、导入工程2、配置启动环境2.1、打开新增配置面板2.2、配置工作目录2.2.1、从常用配置中选择2.2.2、直接粘贴 2.3最终效果 3、调整源码3.1、添加maven引用3.2、注释无效代码3.3、删除测试代码 4、修改运行端…...
分类模型:MATLAB判别分析
1. 判别分析简介 判别分析(Discriminant Analysis) 是一种统计方法,用于在已知分类的样本中构建分类器,并根据特征变量对未知类别的样本进行分类。常见的判别分析方法包括线性判别分析(Linear Discriminant Analysis, …...
生产 的mybatisplus 日志输入到日志文件
默认是输出到控制台.不输出到日志文件 输出到日志文件.需要修改配置 第一步. logging:config: classpath:logback-wshoto.xml第二步 mybatis-plus:configuration:cache-enabled: truedefault-executor-type: reuselog-impl: org.apache.ibatis.logging.slf4j.Slf4jImpl第三步…...
八分钟生成一篇两万字的文章演示——《基于灰色预测的人口预测模型》
文章目录 工具使用 《基于灰色预测的人口预测模型》-全文由AI一次性生成文献综述研究方法模型开发灰色预测模型的数学构建参数估计模型验证 案例研究案例研究描述数据收集与预处理灰色预测模型的应用 文献综述研究方法模型开发灰色预测模型的数学构建参数估计模型验证 案例研究…...
golang 透明底图转白底
url : ""var s []byte// 请求线上图片s GetUrl(url)// 处理透明底图转白底img, _, err : image.Decode(bytes.NewReader(s))if err ! nil {fmt.Println("读取图片失败")}bounds : img.Bounds()dst : image.NewNRGBA(bounds)draw.Draw(dst, bounds, image.…...
【一】【网络使用小知识】使用aria2软件结合Windows PowerShell命令行快速下载文件
下载aria2软件 点击进入网址,aria2下载网址. 下载windows版本. 通过Windows PowerShell命令行使用aria2软件下载文件 通用下载文件命令行代码 aria2软件完整路径 -x 16 -s 32 -d 下载目录(文件夹) -o 文件名 下载链接路径示例,用aria2下载qq 找到aria2应用的直接地址,结合…...
报错:C1189#error: The <experimental/filesystem> header providing 解决方案
今天开发过程中,需要使用文件系统experimental/filesystem,报错C1189#error: The <experimental/filesystem> header providing ,通过以下解决方案,成功运行程序。 目录 一、打开项目下的属性 二、选择C/…...
Elixir学习笔记——速构(函数式编程基础)
在 Elixir 中,循环遍历 Enumerable 是很常见的,通常会过滤掉一些结果并将值映射到另一个列表中。 速构是此类构造的语法糖:它们将这些常见任务分组为 for 特殊形式。 例如,我们可以将一串整数映射到它们的平方值: 速构…...
开源项目大合集(热门)
人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…...
【JVM】JVisualVM的介绍、使用和GC过程
VisualVM介绍 VisualVM 是Netbeans的profile子项目,已在JDK6.0 update 7 中自带,能够监控线程,内存情况,查看方法的CPU时间和内存中的对 象,已被GC的对象,反向查看分配的堆栈(如100个String对象分别由哪几…...
个人在家如何获取World Scientific文献的经验分享
今天有位同学求助一篇World Scientific文献,他的学校虽然有这个数据库,但订购的该数据库资源内容有限,这位同学所需的文献不在学校订购范围内所以下载不了。今天小编就分享一个在家就可获取各个数据库文献的方法。本文以这篇求助文献为例&…...
Java 收集常见面试题
set和list的区别?给定一系列字符串,从集合的set和list中查询,如何查询出相关的数据? 在Java中,Set和List都是用于存储对象的集合 Set: 不允许包含重复的元素。 没有顺序(即不保证元素的迭代顺序…...
JS 严格模式和正常模式的区别
严格模式使用"use strict"; 作用: 消除 Javascript 语法的一些不合理、不严谨之处,减少一些怪异行为;消除代码运行的一些不安全之处,保证代码运行的安全;提高编译器效率,增加运行速度;为未来新…...
9种编程语言的对比分析
在当今的软件开发领域,编程语言扮演着至关重要的角色。不同的编程语言各有其特点和适用场景,选择合适的编程语言能够提高开发效率和软件质量。本文将对十种常见的编程语言进行对比分析,帮助读者了解它们的优缺点和适用场景。 Java 特点&…...
模拟14位相机输出Verilog代码
1 代码 `timescale 1ns / 1psmodule simulate_camera_out (input clk,input rest_n,output camera_clk, //像素时钟output [13:0] camera_data, //像素值数据output [19:0] pixel_xy, //此时输出的像素值坐标output reg frame_valid //帧有效信号,1代表帧有效0代表帧无效…...
Linux远程访问及控制
SSH远程管理 SSH(Secure Shell)是一种安全通道协议,主要用来实现字符界面的远程登录、远程复制等功能。SSH 协议对通信双方的数据传输进行了加密处理,其中包括用户登录时输入的用户口令。与早期的 Telent(远程登录)、RSH(Remote Shell,远程执…...
归并排序个人见解
归并排序个人见解 思路实现代码实现题目 思路实现 归并排序属于分治算法,分治算法有三个步骤: 分:将问题划分为多个规模较小的子问题,这些子问题与原始问题相似。治:递归地解决这些子问题。如果子问题足够小…...
软考初级网络管理员__网络单选题
1.观察交换机状态指示灯初步判断交换机故障,交换机运行中指示灯显示红色表示()。 警告 正常 待机 繁忙 2.通常测试网络连通性采用的命令是()。 Netstat Ping Msconfig Cmd 3.一台16端口的交换机可以产生()个冲突域? 1 4 15 16…...
22.2 正则表达式-数据验证、数据变换
1. 数据验证 正则表达可用于验证文本是否满足某种给定的模式。 正则表达式也是一种语言,因此在使用之前必须先对其进行编译,并将编译结果保存在一个Regexp类型的变量里。以下两个函数即返回该变量的指针。 re, err : regexp.Compile("^[a-zA-Z0-…...
示例:WPF中应用DataGrid读取实体DisplayAttribute特性自动自动生成列名
一、目的:通过重写DataGrid的OnAutoGeneratingColumn方法实现根据定义特性自动生成列头信息功能 二、实现 <DataGrid ItemsSource"{local:GetStudents Count50}"/>实体定义如下 public class Student{[DataGridColumn("*")][Display(Na…...
八股文之JVM
目录 1.JVM内存划分 2.JVM类加载过程 3.JVM垃圾回收机制GC 3.1.判断谁是垃圾 3.2.如何释放对应的内存 1.JVM内存划分 在一个Java程序运行起来之后,jvm就会从操作系统中申请一块内存,然后就会将该内存划分成多个部分,用于不同的用途。 …...
南充网站建设略奥网络/落实20条优化措施
Description 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N 1) / 2,输出A[1], A[2], …, A[2k - 1]的中位数。即前1,3,5,……个数的中位数。 N ≤ 100000 Solution 这题方法很多,这里介绍splay…...
佛山高端外贸网站建设/长沙自动seo
整理一帖,方便速查网络通信常见端口汇总 端口号描述0端口无效端口,通常用于分析操作系统1端口传输控制协议端口服务多路开关选择器2端口管理实用程序3端口压缩进程5端口远程作业登录7端口回显9端口丢弃11端口在线用户13端口时间17端口每日引用18端口消息发送协议19端…...
东莞手机网站制作/陕西seo顾问服务
有一批价格分别为p1,p2, p3 … pn的n种商品, 你手中持有金钱为money,如何购买商品使剩余的钱最少,求最少剩多少? 示例一: 输入 p[150, 200, 350], money 250 输出:50 示例二: 输入…...
做网站哪个靠谱/汕头seo推广外包
目录循环依赖多级缓存一级缓存二级缓存当循环依赖遇上AOP三级缓存Spring三级缓存源码实现总结循环依赖 BeanFactory作为bean工厂管理我们的单例bean,那么肯定需要有个缓存来存储这些单例bean,在Spring中就是一个Map结构的缓存,key为beanName&…...
国际交易所app下载/抖音搜索优化
回文字符串 时间限制:3000 ms | 内存限制:65535 KB 难度:4描述 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如"aba"。当然,我们给你的问题不会再简单到判…...
网站建设及优化 赣icp/如何快速推广网上国网
一,需求 迭代1 1,实现一个长度(Length)计算系统 用户既可以使用Mile为单位来记录一个长度,也可以用Yard为单位来记录 2,用户可以对比两个用不同单位表示的长度的相等关系 1 Mile 1760 Yard …...