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

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

相关推荐
一朵好运莲12 小时前
智能体使用 Chrome DevTools MCP 调试浏览器
开发语言·javascript·react.js
嘟嘟071712 小时前
Next.js 里 SSR、CSR 和水合到底差在哪?从一段待办代码说起
前端·后端·next.js
liuxiaocheng12 小时前
快速上手:5 分钟跑通第一个 AI SDK 例子
前端·人工智能·后端
霹雳桃13 小时前
移动端 H5 折叠屏适配实战:为什么 max-width 没用,min(vw, px) 才是正解
前端·前端框架
Goodbye13 小时前
useContext 上下文与自定义 Hooks:跨层级数据共享的优雅方案
前端
新时代牛马13 小时前
Vue.js 响应式原理详解
前端·javascript·vue.js
jaysee-sjc13 小时前
【JavaWeb】Tlias智能学习辅助系统|后端Web实战(登录认证)
java·开发语言·前端·学习·mybatis
触底反弹13 小时前
🔥 从 SPA 到 SSR:5 个核心差异搞懂 Next.js 为什么是前端 SEO 的终极方案
前端·react.js·next.js
岁月留痕16813 小时前
11 实战项目一:搭建“一言”项目骨架
前端