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

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

相关推荐
静小谢1 小时前
vue3实现语言切换vue-i18n
前端·javascript·vue.js
东东5161 小时前
资产管理信息系统ssm+vue
前端·javascript·vue.js
森爱。1 小时前
web开发全家桶(django+前端+数据库)
前端·python·django
骆驼爱记录1 小时前
Word侧边页码设置全攻略
前端·自动化·word·excel·wps·新人首发
方安乐1 小时前
react笔记之useCallback/useEffect闭包陷阱
前端·笔记·react.js
沐墨染1 小时前
黑词分析前端组件设计:双面板交互与黑词进度监控
前端
运维行者_1 小时前
用Applications Manager监控HAProxy:保障负载均衡高效稳定
运维·开发语言·前端·数据库·tcp/ip·负载均衡·服务器监控
东东5163 小时前
基于ssm的网上房屋中介管理系统vue
前端·javascript·vue.js
harrain4 小时前
什么!vue3.4开始,v-model不能用在prop上
前端·javascript·vue.js
fanruitian10 小时前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app