当前位置: 首页 > news >正文

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 将子组件包裹一下:

包裹一下之后就不会报错了,而且也可以拿到子组件实例了:但是子组件实例上面啥都没有,是一个空对象?

这个时候还要在子组件上暴露出去几个函数,才可以让父组件拿到子组件实例上的函数:

  // 暴露出去的实例对象应该有哪些函数useImperativeHandle(ref, () => ({saveMd: () => {console.log("保存markdown内容");localStorage.setItem("notes", htmlString)}}))

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

http://www.lryc.cn/news/140637.html

相关文章:

  • MathType7MAC中文版数学公式编辑器下载安装教程
  • python项目实战
  • 网络渗透day03-Windows Server相关知识
  • 关于述职答辩的一点思考和总结
  • 远程调试环境配置
  • C++:构造方法(函数);拷贝(复制)构造函数:浅拷贝、深拷贝;析构函数。
  • vr内容编辑软件降低了虚拟现实项目开发门槛
  • 【水平垂直居中布局】CSS实现水平垂直居中的5种方法(附源码)
  • 原生js插入HTML元素
  • 腾讯云V265/TXAV1直播场景下的编码优化和应用
  • 牛客练习赛114 G-图上异或难题(线性基)
  • Neo4j之ORDER BY基础
  • 【C++杂货铺】探索vector的底层实现
  • MybatisPlus(1)
  • 探索未来世界,解密区块链奥秘!
  • win10 下运行 npm run watch-poll问题
  • Android平台RTMP|RTSP直播播放器功能进阶探讨
  • Centos7安装Telnet服务
  • 【C++】GCC对应C++的版本支持
  • 前端面试:【算法】排序、查找、递归、动态规划
  • RK3399 开机自启一个shell脚本,一直起不来BUG
  • [MyBatis系列④]核心配置文件
  • 系统架构设计高级技能 · 层次式架构设计理论与实践
  • Nuxt3打包部署到Linux(node+pm2安装和运行步骤+nginx代理)
  • 一维数组传参
  • 七层、四层和五层网络模型区别和联系
  • RH1288V3 - 初识物理服务器
  • excel中如果A列中某项有多条记录,针对A列中相同的项,将B列值进行相加合并统计
  • 开发智能应用的新范式:大数据、AI和云原生如何构建智能软件
  • 淘宝免费爬虫数据 商品详情数据 商品销售额销量API