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 参数。

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

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

相关文章

springAOP 使用aop代替SqlsessionUtil业务层操作

在Maven框架pom配置文件中导入spring相关依赖&#xff1a; <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33</version></dependency><dependency…

【前端每日基础】day36——vue组件的通信方式

在Vue.js中&#xff0c;组件通信是一个重要的概念&#xff0c;它允许组件之间进行数据传递和事件处理。Vue.js提供了多种方式来实现组件之间的通信&#xff0c;适用于不同的场景和需求。以下是Vue组件通信的几种常见方式及其详细介绍&#xff1a; 父子组件通信 父组件向子组件…

6、资产评估专家指引第9号—数据资产评估

本专家指引是一种专家建议。评估机构执行资产评估业务,可以参照本专家指引,也可以根据具体情况采用其他适当的做法。中国资产评估协会将根据业务发展,对本专家指引进行更新。 第一章 引言 第一条 针对数据资产特点,结合目前实际操作中的部分难点和要点,中国资产评估协会…

mac配置Personal Access Tokens

背景 在macbook环境中&#xff0c;使用idea、android studio、xcode时&#xff0c;使用gitlab需要登录&#xff0c;而直接使用文明密码是不允许登录的&#xff0c;这时就需要换种方式&#xff0c;这里有两种&#xff1a;ssh、Access Tokens&#xff0c;在公用电脑上推荐使用Ac…

第一个SpringBoot项目

目录 &#x1f4ad;1、新建New Project IDEA2023版本创建Sping项目只能勾选17和21&#xff0c;却无法使用Java8&#xff1f;&#x1f31f; 2、下载JDK 17&#x1f31f; &#x1f4ad;2、项目创建成功界面 1、目录 &#x1f31f; 2、pom文件&#x1f31f; &#x1f4ad;3、…

前K个高频元素-力扣

本题想到的解法是使用哈希表首先统计数组中每个元素出现的次数&#xff0c;然后对出现次数进行排序&#xff0c;最后进行输出。看了题解学习到使用优先级队列 小顶堆来完成&#xff0c;小顶堆的排序规则由自己来定义。 代码如下&#xff1a; class Solution { public:class My…

ctfshow 年CTF web

除夕 Notice: Undefined index: year in /var/www/html/index.php on line 16 <?phpinclude "flag.php";$year $_GET[year];if($year2022 && $year1!2023){echo $flag; }else{highlight_file(__FILE__); } 弱比较绕过很简单&#xff0c;连函数都没有直…

代码随想录算法训练营Day59 | 503.下一个更大元素II 42. 接雨水

代码随想录算法训练营Day59 | 503.下一个更大元素II 42. 接雨水 LeetCode 503.下一个更大元素II 题目链接&#xff1a;LeetCode 503.下一个更大元素II 思路&#xff1a; class Solution { public:vector<int> nextGreaterElements(vector<int>& nums) {// …

【数据分享】中国民政统计年鉴(1949-2022)

大家好&#xff01;今天我要向大家介绍一份重要的中国民政统计数据资源——《中国民政统计年鉴》。这份年鉴涵盖了从1949年到2022年中国民政统计全面数据&#xff0c;并提供限时免费下载。&#xff08;无需分享朋友圈即可获取&#xff09; 数据介绍 从1949年到2022年&#xf…

程序员的职业素养

在当今这个快速发展的技术世界中&#xff0c;程序员的职业素养已经成为了一个热门话题。随着技术的不断进步&#xff0c;程序员不仅需要掌握强大的技术能力&#xff0c;更需要具备一系列的职业素养来确保他们能够在职业生涯中取得成功。 《程序员的职业素养》一书由著名的软件工…

云原生架构案例分析_4.某电商业务云原生改造

名称解释&#xff1a; AHAS&#xff1a;应用高可用服务&#xff08;Application High Availability Service&#xff09;是一款专注于提高应用高可用能力的SaaS产品&#xff0c;主要包含多活容灾、故障演练和流量防护三个独立的功能模块。其中流量防护已迁移至微服务治理服务MS…

Java - Path接口和Files工具类

在Java中&#xff0c;Path接口和Files工具类是Java 7中引入的java.nio.file包的一部分&#xff0c;用于文件和文件系统的操作。这些API提供了比传统的java.io包更为强大和灵活的文件处理功能。 Path接口 Path接口表示文件系统中的路径&#xff0c;它可以是文件名或目录名。Pa…

再度“冲三”失利的泸州老窖,还能拿出什么“杀手锏”?

正值“618”&#xff0c;白酒行业也迎来了重要创收时刻。 据悉&#xff0c;天猫“618购物节”开卖首日&#xff0c;酒水直播销售额增长超1300%&#xff0c;拉动白酒行业增长147%。 这一增长背后&#xff0c;赛道的火药味也愈发浓厚&#xff0c;今年618大促中&#xff0c;五粮…

第十周:目标计划管理

1. 企业的目的 企业不同时期的目标是不一样的&#xff0c;第一阶段是保证存活&#xff1b;第二阶段是为了发展&#xff0c;加强公司业绩&#xff0c;达到预期的盈利&#xff1b;第三阶段是在发展壮大之后&#xff0c;有更多精力投入公司健康运转的事情&#xff0c;保证长久的生…

Flutter 中的 DefaultTextStyle 小部件:全面指南

Flutter 中的 DefaultTextStyle 小部件&#xff1a;全面指南 Flutter 是一个由 Google 开发的跨平台 UI 框架&#xff0c;它提供了丰富的组件来帮助开发者构建高性能、美观的应用。在 Flutter 的布局体系中&#xff0c;DefaultTextStyle 是一个重要的组件&#xff0c;它允许开…

【电路笔记】-Sallen-Key滤波器

Sallen-Key滤波器 Sallen-Key 滤波器拓扑用作实现高阶有源滤波器的构建块。 1、概述 Sallen-Key 滤波器设计是一种二阶有源滤波器拓扑,我们可以将其用作实现高阶滤波器电路的基本构建块,例如低通 (LPF)、高通 (HPF) 和带通 ( BPF)滤波器电路。 正如我们在本滤波器部分中…

<读评论……?>

为纪念今天数学比赛AK 回复一下比较常见的问题&#xff01; Q1:平常写代码时使用万能头文件好还是一个一个慢慢写好&#xff1f; A:我其实个人认为万能头好&#xff0c;这样比较省时 Q2:有很多书上写int main&#xff08;&#xff09;可以去掉int&#xff0c; 这是真的吗&#…

【匹配线段问题】

问题&#xff1a; 如下图所示。图中有两行正整数&#xff0c;每行中有若干个正整数。如果第一行的某个数r与第二行的某个数相同&#xff0c;这样就可以在这两个正整数之间划一条线&#xff0c;并称之为r-匹配线段。下图中存在3-匹配线段和2-匹配线段。 请编写完整程序&#xf…

【C语言】详解函数(庖丁解牛版)

文章目录 1. 前言2. 函数的概念3.库函数3.1 标准库和头文件3.2 库函数的使用3.2.1 头文件的包含3.2.2 实践 4. 自定义函数4.1 自定义函数的语法形式4.2 函数的举例 5. 形参和实参5.1 实参5.2 形参5.3 实参和形参的关系 6. return 语句6. 总结 1. 前言 一讲到函数这块&#xff…

Flutter 中的 CupertinoUserInterfaceLevel 小部件:全面指南

Flutter 中的 CupertinoUserInterfaceLevel 小部件&#xff1a;全面指南 Flutter 是一个功能强大的 UI 框架&#xff0c;由 Google 开发&#xff0c;允许开发者使用 Dart 语言构建跨平台的移动、Web 和桌面应用。在 Flutter 的 Cupertino&#xff08;iOS 风格&#xff09;组件…