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

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

相关推荐
ShiJiuD66688899913 小时前
大事件板块三
前端·bootstrap·html
JavaAgent架构师13 小时前
前端AI工程化(五):AI对话状态管理
前端·人工智能
ricardo197313 小时前
一张图搞懂 HTTP 缓存:强缓存、协商缓存与最佳 Cache-Control 配置
前端
程序员码歌13 小时前
别再让 AI 自由发挥了:OpenSpec 才是团队协作不跑偏的关键
android·前端·人工智能
用户114818678948413 小时前
Vue 开发者快速上手 Flutter(二)
前端
用户114818678948413 小时前
Vue 开发者快速上手 Flutter(三)
前端
JavaAgent架构师13 小时前
前端AI工程化(六):Function Calling与RAG前端实践
前端·人工智能
用户114818678948413 小时前
Vue 开发者快速上手 Flutter(一)
前端
鹏多多14 小时前
Trae cn里使用Pencil来制作设计图的手把手教程
前端·ai编程·trae
客场消音器14 小时前
如何使用codex进行UI重构,让AI开发的前端页面不再千篇一律
前端·后端·微信小程序