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 的获取。


以上。

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

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

相关文章

为什么选择CleanMyMac软件呢?推荐理由

你是否曾经遇到过这样的问题&#xff1a;电脑运行缓慢&#xff0c;存储空间不足&#xff0c;不知道如何清理垃圾文件&#xff1f;别担心&#xff0c;我们为你找到了解决方案——CleanMyMac软件。这款强大的工具可以帮助你轻松解决这些问题&#xff0c;让你的电脑焕然一新&#…

深入理解Python中的包与模块

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、包的概述与功能 代码案例&#xff1a;包的结构 二、模块的划分与组合 划分模块的方法…

开源内网穿透神器:中微子代理(neutrino-proxy)实现内网穿刺

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

dubbo复习:(10)使用tripple协议进行通信

一、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.…

场景文本检测识别学习 day10(MMdetection)

配置文件(config) 由于在大型项目中&#xff0c;一种模型需要分&#xff1a;tiny、small、big等很多种&#xff0c;而它们的区别主要在网络结构&#xff0c;数据的加载&#xff0c;训练策略等&#xff0c;且差别很多都很小&#xff0c;所以如果每个模型都手动从头写一份&#…

ChatGPT原创指令大全(持续更新)

随着ChatGPT在互联网上的使用越来越多&#xff0c;但很多人在使用ChatGPT的过程中会觉得得到的答案并不是很精准。究其原因其实是你给它的命令不够准确、不够到位。实际现在网上已经很多关于ChatGPT的网站&#xff0c;可以快速生成带有快捷键的ChatGPT指令。但是对于不熟悉Chat…

LeetCode 2951.找出峰值:模拟(遍历)

【LetMeFly】2951.找出峰值&#xff1a;模拟&#xff08;遍历&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-the-peaks/ 给你一个下标从 0 开始的数组 mountain 。你的任务是找出数组 mountain 中的所有 峰值。 以数组形式返回给定数组中 峰值 的…

视创云展「VR直播」是什么?有哪些功能和应用场景?

视创云展「VR直播」通过“3D沉浸式展厅直播高互动感”的创新玩法&#xff0c;使企业随时随地举办一场低成本、高互动、能获客的元宇宙直播活动成为可能。「VR直播」能实现3D展厅内VR场景漫游&#xff0c;更结合音视频交互、同屏互动等新功能&#xff0c;为用户带来更沉浸的虚拟…

Java基础之 API 字符串

文章目录 API字符串String概述创建对象 java的内存模型java的常用方法(比较)练习 API 概念: APl(Application ProgrammingInterface): 应用程序编程接口 简单理解: API就是别人已经写好的东西&#xff0c;我们不需要自己编写&#xff0c;直接使用即可。 Java API: 指的就是J…

马斯克的 xAI 帝国!60亿融资背后的超级布局?

在全球科技竞技场&#xff0c;每个重大融资事件都是对行业格局的一次重塑。近日&#xff0c;埃隆马斯克的人工智能初创企业 xAI 成功完成了一轮规模空前的融资——60亿美元&#xff0c;此举无疑在业界投下了一枚震撼弹&#xff0c;标志着 AI 领域内一场新的竞赛拉开了序幕。 …

旅游卡在哪里拿货?千益畅行旅游卡源头

旅游卡是一种便捷的旅行工具&#xff0c;它可以提供多种优惠和特惠&#xff0c;让人们在旅行中更加省钱、省心。那么&#xff0c;在千益畅行旅游卡这里&#xff0c;我们该如何拿到这张神奇的旅游卡呢&#xff1f; 首先&#xff0c;千益畅行旅游卡作为一款专为旅行爱好者打造的…

QT学习(20):QStyle类

Qt包含一组QStyle子类&#xff0c;这些子类&#xff08;QWindowsStyle&#xff0c;QMacStyle等&#xff09;模拟Qt支持的不同平台的样式&#xff0c;默认情况下&#xff0c;这些样式内置在Qt GUI模块中&#xff0c;样式也可以作为插件提供。 Qt的内置widgets使用QStyle来执行几…

LangChain之链的应用(下)

LangChain之链的应用 Chain链的应用配置LLMChain&#xff1a;简单链create_stuff_documents_chain&#xff1a;文档链create_extraction_chain&#xff1a;提取信息链LLMMathChain&#xff1a;数学链create_sql_query_chain&#xff1a;SQL查询链连接数据库创建并使用链 Sequen…

K210 数字识别 教程

一、烧写固件 连接k210开发板&#xff0c;点开烧录固件工具&#xff0c;选中固件&#xff0c;并下载 二、模型训练 网站&#xff1a;MaixHub 1、上传文件 2、开始标记数据 添加9个标签&#xff0c;命名为1~9&#xff0c;按键盘w开始标记&#xff0c;键盘D可以下一张图片&…

计算机网络(1

网络初识 目录 网络初识一. 网络分类1. 局域网LAN(Local Area Network):2. 广域网WAN(Wide Area Network): 二. 组建网络的基础设备1. 路由器2. 交换机 三. 标识符 协议 (protocol)一. 协议分层1. 分层的好处2. OSI七层分层3. TCP/IP五层模型(或四层) 模型(1. 物理层(可不算)(2…

6.8 LIBBPF API(七,bpf_core_read.h 函数,定义,枚举)

一,函数 void * bpf_rdonly_cast (const void *obj, __u32 btf_id) __ksym __weak 二,定义 __CORE_RELO(src, field, info) __builtin_preserve_field_info((src)->field,BPF_FIELD_##info) __CORE_BITFIELD_PROBE_READ(dst, src, fld) bpf_probe_read_kernel( \ (v…

学习前端第四十二天(修改文档)

1、创建一个元素 docunment.createElement( tag )&#xff1b;创建一个元素节点 let div document.createElement&#xff08;“div”&#xff09;&#xff1b;创建一个div标签 document.createTextNode&#xff08; Text &#xff09;&#xff1b;创建一个文本节点 let t…

Windows hook介绍与代码演示

Windows Hook 是一种机制&#xff0c;允许应用程序监视系统或处理特定事件。它可以拦截和更改消息&#xff0c;甚至可以插入到其他应用程序的消息处理机制中。Windows 提供了多种挂钩类型&#xff0c;例如键盘挂钩、鼠标挂钩、消息挂钩等。 hook代码实现 下面是一个使用 Wind…

【Zotero】【MacOS】Zotero6常用插件总结

因为目前MacOS只支持Zotero6&#xff0c;所以我将网上找到的教程以及自己找到适应Zotero6版本的插件做了个整合 教程地址&#xff1a;Zotero6安装/插件安装教程 插件地址&#xff1a;Zotero6_Plugs

Django教程——数据库操作(增删改查)

在上篇文章中我们学习了Django教程——模型&#xff0c;这篇文章学习Django教程——数据库操作&#xff08;增删改查&#xff09;。 在学习数据库操作之前&#xff0c;我们需要定义好模型类&#xff0c;模型类代码如下&#xff1a; from django.db import models class UserM…