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

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

相关推荐
weixin_3823952311 小时前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__12 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.12 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~13 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华14 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子16 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅16 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni17 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学18 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端