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)
    }
  }))

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

相关推荐
MacroZheng4 分钟前
腾讯又开源了一个新项目,用起来真优雅!
前端·vue.js·人工智能
如此这般英俊19 分钟前
手搓Claude Code-第十三章 background_tasks
前端·人工智能·chrome·python·算法·语言模型·自然语言处理
人间凡尔赛21 分钟前
Angular 20 告别 Zone.js:Zoneless 无 Zone 时代正式开启,Signals 驱动的响应式新范式(附完整代码)
前端·angular
雪芽蓝域zzs24 分钟前
(五)Vue3 管理后台:权限控制原理 + 完整流程梳理
前端
meilindehuzi_a25 分钟前
React JWT 登录鉴权实战:从无状态 HTTP 到路由守卫、Zustand 与 Axios 拦截器
前端·react.js·http
爱酱丶35 分钟前
VS Code 快速生成Vue3 + TypeScript + Setup 基础空模板
前端·javascript·typescript
小帅不太帅37 分钟前
我把金博士使用 GPT 证明 Crouzeix 猜想的方法做成了一个 deep-learn 技能
前端·github·agent
Maxkim38 分钟前
在 GitHub 仓库里配一个 AI Code Reviewer,自动审查 PR
前端·javascript
忆江南38 分钟前
Flutter 图片库与 Dio 库优化实战指南
前端