react通过ref获取函数子组件实例方法

news/2024/11/17 9:40:20/

在react16之后带来了hooks之后,确实方便了很多组件开发,也加快了函数式编程的速度,但是当你通过useRef获取子组件的时候,又恰好子组件是一个函数组件,那么将会报一个错误:报这个错误的主要原因是函数组件没有实例对象,所以你没办法通过ref获取子组件实例 

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

所以它提示你是否使用 forwardRef 将子组件包裹一下:

包裹一下之后就不会报错了,而且也可以拿到子组件实例了:但是子组件实例上面啥都没有,是一个空对象?

这个时候还要在子组件上暴露出去几个函数,才可以让父组件拿到子组件实例上的函数:

  // 暴露出去的实例对象应该有哪些函数useImperativeHandle(ref, () => ({saveMd: () => {console.log("保存markdown内容");localStorage.setItem("notes", htmlString)}}))

这时候再看一下获取到的子组件实例:就有了子组件暴露出去的函数,就可以调用了


http://www.ppmy.cn/news/1051241.html

相关文章

算法通关村第5关【青铜】| Hash和队列的特征

1.Hash基础 (1)基础 哈希也称为散列,通过算法变成固定长度的输出值,存入对应的位置 例如这个算法为取模算法,indexnumber 模 7 存入1到15 (2)碰撞处理 当多个元素映射到同一位置上时就产生…

拼多多商品详情API接入站点,实时数据json格式示例

作为国内最大的电商平台之一,拼多多数据采集具有多个维度。 有人需要采集商品信息,包括品类、品牌、产品名、价格、销量等字段,以了解商品销售状况、热门商品属性,进行市场扩大和重要决策; 商品数据:拼…

opencv 矩阵运算

1.矩阵乘&#xff08;*&#xff09; Mat mat1 Mat::ones(2,3,CV_32FC1);Mat mat2 Mat::ones(3,2,CV_32FC1);Mat mat3 mat1 * mat2; //矩阵乘 结果 2.元素乘法或者除法&#xff08;mul&#xff09; Mat m Mat::ones(2, 3, CV_32FC1);m.at<float>(0, 1) 3;m.at…

Paython-datetime模块

datetime模块 本文介绍了Datetime,常用的内容 一:naive datetime和 aware datetime 的概念 二:datetime.date 三:datetime.time 四:datetime.datetime 五:时间之间的运算方法datetime.timedelta 六:使用pytz时区包,让datetime成为aware datetime naive datetime and awa…

【深入理解jvm读书笔记】什么是引用分级(强引用、软引用、弱引用、虚引用)

什么是引用分级&#xff08;强引用、软引用、弱引用、虚引用&#xff09; 引用设计引用分级的目的 引用 四种引用&#xff1a;强软弱虚 强引用是最传统的“引用”的定义&#xff0c;是指在程序代码之中普遍存在的引用赋值&#xff0c;即类似“Object objnew Object()”这种引…

15. Canvas制作汽车油耗仪表盘

1. 说明 本篇文章在14. 利用Canvas组件制作时钟的基础上进行一些更改&#xff0c;想查看全面的代码可以点击链接查看即可。 效果展示&#xff1a; 2. 整体代码 import QtQuick 2.15 import QtQuick.Controls 2.15Item{id:rootimplicitWidth: 400implicitHeight: implicitWi…

OrienterNet: visual localization in 2D public maps with neural matching 论文阅读

论文信息 题目&#xff1a;OrienterNet: visual localization in 2D public maps with neural matching 作者&#xff1a;Paul-Edouard Sarlin&#xff0c; Daniel DeTone 项目地址&#xff1a;github.com/facebookresearch/OrienterNet 来源&#xff1a;CVPR 时间&#xff1a…

开源量化交易平台开发框架and 把Android手机变成电脑摄像头

开源量化交易平台开发框架and 把Android手机变成电脑摄像头 基于Python的开源量化交易平台开发框架把Android手机变成电脑摄像头 基于Python的开源量化交易平台开发框架 把Android手机变成电脑摄像头