React 中的 ForwardRef的使用

React 中的 forwardRef Hooks 是指将子组件的 Dom 节点暴露给给父组件,在 React 中如果想要访问 Dom 节点是通过 useRef 这个 hooks,而 forwardHook 在 useRef 做了扩展。useRef 是当前组件中间中的节点,而 forwardRef 相当于做了一层封装将父组件的一个 Ref 对象传到子组件中,如下例:

#父组件中定义 Ref
const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}
#封装子组件,传入 Ref参数
import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={ref} />
    </label>
  );
});

export default MyInput;

forwardRef 源码中定义一个elementType 为 REACT_FORWARD_REF_TYPE reactElement。
在这里插入图片描述

总结

forwardRef 相当于是为 ref 传递的一种方式,普通的函数式组件就是 Render,而 fowardRef 多加了 Ref 参数。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

屏幕录制工具分享6款,附上详细电脑录屏教程(2024全新)

当你即将参加一个重要的在线会议或一堂关键的直播课&#xff0c;但又担心错过关键点或无法及时做笔记时&#xff0c;屏幕录制无疑是最好的方法之一。屏幕录制是一项非常有价值的技能&#xff0c;它能让你出于各种目的捕捉屏幕上的活动。无论你的目的是创建教程、演示软件功能、…

重学java 62.IO流 字节流 ③ 字节输入流

告别这种事情&#xff0c;没有道理可讲 —— 24.6.4 一、字节输入流的介绍以及方法的使用 1.概述: 字节输入流 InputStream,是一个抽象类 子类:FileInputStream 2.作用: 读数据,将数据从硬盘上读到内存中来 3.构造: FileInputstream(File file) FileInputstream(String path…

容器中运行ifconfig提示bash: ifconfig: command not found【笔记】

容器中运行ifconfig提示bash: ifconfig: command not found 这个问题是因为在容器中没有安装ifconfig命令。 在容器中安装ifconfig命令&#xff0c;可以使用以下命令&#xff1a; 对于基于Debian/Ubuntu的容器&#xff0c;使用以下命令&#xff1a; apt-get update apt-get …

Spring Boot 使用自定义注解和自定义线程池实现异步日志记录

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

leetcode739 每日温度

题目 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 示例 输入: tempe…

探秘Android系统启动的神秘面纱

系统启动过程对于任何操作系统来说都是一个非常关键的环节&#xff0c;Android作为移动设备领域中占据主导地位的操作系统&#xff0c;其启动过程也是个值得深入研究的重点话题。本文将为您解开Android启动过程的神秘面纱&#xff0c;详细剖析其中的每一个步骤&#xff0c;并通…

vue 将echart 下载为base64图片

1 echart是页面的子组件&#xff0c; 2 页面有多个echart 3 将多个echart下载为base64图片 // 子组件 echart&#xff0c;要保存echartconst chart this.$echarts.init(this.$refs.chart, light) this.chartData chart; //保存数据&#xff0c;供父组件alarmReport调用(th…

专业130+总分400+四川大学951信号与系统考研经验川大电子信息与通信工程,真题,大纲,参考书。教材。

今年四川大学951信号与系统专业课130&#xff08;据我所知没有140以上的今年&#xff09;&#xff0c;总分400&#xff0c;顺利上岸川大&#xff0c;回顾一下自己这一年的复习&#xff0c;希望自己的经历可以对大家复习有所借鉴&#xff0c;也是对自己的考研画上句话。专业课&a…

重庆耶非凡科技业务大盘点:这些领域你都了解吗?

重庆耶非凡科技有限公司&#xff0c;这家位于重庆市经开区的企业&#xff0c;以其独特的业务模式和专业的技术实力&#xff0c;赢得了业界的广泛认可。它的主要业务涵盖了选品师项目和人力RPO项目两大领域。 首先&#xff0c;我们不得不提的是耶非凡科技的选品师项目 在当今消费…

算法004:盛水最多的容器

这道题比较简单&#xff0c;使用双指针。 要求的是最大面积&#xff0c;对于一个水桶&#xff08;水杯来说&#xff09;&#xff0c;面积的算法是固定的&#xff0c;就是底乘以高。 在这个题中&#xff0c;我们把左边的位置设为left&#xff0c;右边的位置设为right&#xff…

vue3 + echarts 二次开发百分比饼图

效果图&#xff1a; 安装 pnpm i echarts 公共模块组件 <divclass"pie"ref"percent"style"width: 100%; height: calc(100% - 48px)"></div> import { ref, onMounted } from vue import * as echarts from echarts const prop…

JavaEE:http请求 | 过滤器 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够!

&#x1f4c3;HTTP请求 ▐ http超文本传输协议&#xff1a; ⦁ http超文本传输协议属于应用层协议&#xff0c;传输内容必须是超文本内容 (网页内容) ⦁ 例如在网页上点击超链接&#xff0c;提交表单&#xff0c;都可以向后端发送一个http请求 ⦁ 一次http请求中包含请求行、…

盘点哪些企业容易被ddos攻击

DDoS&#xff08;分布式拒绝服务&#xff09;攻击已成为网络安全威胁中的重要一环。本文将探讨哪些类型的企业容易成为DDoS攻击的目标&#xff0c;并提出相应的防范策略&#xff0c;帮助企业更好地保护自身网络安全。 一、电子商务平台 电子商务平台作为线上交易和支付的重要场…

Direct local .aar file dependencies are not supported when building an AAR.

最近升级了最新的AndroidStdio版本&#xff0c;然后导入之前的安卓工程 然后经过一番折腾后项目可以跑了&#xff0c;但是意外发现出release包的时候报错了&#xff0c; Direct local .aar file dependencies are not supported when building an AAR. 网上有很多解决方法&am…

鸿蒙HarmonyOS实战—如何使用Video组件播放视频

1.视频播放 鸿蒙系统中&#xff0c;关于视频播放&#xff0c;可以使用上层视频组件Video。 参数如下 src 支持file:///data/storage路径前缀的字符串&#xff0c;用于读取应用沙箱路径内的资源。需要保证目录包路径下的文件有可读权限。 说明&#xff1a;视频支持的格式是&am…

opencv-python(四)

读取图像文件 image cv2.imread(path, flag) flag&#xff1a;1. 默认值&#xff0c;依原图像读取图像&#xff0c;保留Alpha透明度通道。2.IMREAD_GRAYSCALE&#xff1a;将图像转为灰度再读取。3.IMREAD_COLOR&#xff1a;将图像转为三通道BGR彩色再读取。 可读取的图像格…

猫头虎分享已解决Bug || Error: ‘fetch‘ is not defined

原创作者&#xff1a; 猫头虎 作者微信号&#xff1a; Libin9iOak 作者公众号&#xff1a; 猫头虎技术团队 更新日期&#xff1a; 2024年6月6日 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &…

HBuildX创建uni-app项目

新建项目 输入项目名称&#xff0c;选择存放位置、项目模板、vue版本 创建成功后左边会显示项目目录 安装插件&#xff1a;工具-》插件安装&#xff0c;根据所选vue版本安装编译器 点击运行&#xff0c;选择你需要运行的地方即可

Java面试题:ArrayList底层实现原理、HashMap的实现原理、HashMap的jdk1.7和jdk1.8有什么区别

文章目录 一、List相关面试题1.1 ArrayList源码分析&#xff08;底层实现&#xff09;1.2 ArrayList底层的实现原理是什么1.3 ArrayList listnew ArrayList(10)中的list扩容几次1.4 如何实现数组和List之间的转换1.5 ArrayList 和 LinkedList 的区别是什么 二、HashMap相关面试…

[协议]TCP协议

TCP,UDP协议工作在传输层 TCP基于连接&#xff1b; UDP基于非连接 TCP三次握手 UDP:不能保证丢包&#xff0c;传输稳定性不如TCP;