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

在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 将子组件包裹一下:

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

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

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

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

相关推荐
@菜菜_达15 小时前
jquery.inputmask插件介绍
前端·javascript·jquery
QuZhengRong15 小时前
【Luck-Report】缓存
java·前端·后端·vue·excel
jiayong2315 小时前
前端面试题库 - 浏览器与网络篇
前端·网络·面试
Csvn15 小时前
小程序开发:微信小程序与 uni-app 实战指南
前端
摸鱼小李上线了15 小时前
vue项目页面添加水印实现方法
前端·javascript·vue.js
砍材农夫15 小时前
物联网 基于netty构建mqtt协议规范(主题通配符订阅)
java·前端·javascript·物联网·netty
彩票管理中心秘书长15 小时前
智能体状态指示:何时思考、何时调用工具、何时出错
前端·后端·程序员
彩票管理中心秘书长15 小时前
React + TypeScript拆解一整套“AI 变现代码流程”
前端·后端·程序员
广州华水科技15 小时前
单北斗GNSS变形监测在基础设施安全中的应用与维护
前端
码途漫谈15 小时前
把前端组件做成一座小岛:Animal-Island-UI 的自然风 React 组件库拆解
前端·开源