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

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

相关推荐
计算机魔术师3 小时前
我重算了新云的账,发现亏的不是算力,是时间
前端
wiseyao12194 小时前
uniapp scroll-view滚动到最后
前端·javascript·uni-app
陈随易4 小时前
从今天起,你只需要一个浏览器之Ego lite
前端·后端·程序员
怕浪猫4 小时前
Step 5 Preview 模型写 3D 象棋,两个小时上线
前端·javascript·面试
Highcharts.js4 小时前
Highcharts甘特图开发带导航功能的项目管理图示例
开发语言·前端·javascript·甘特图·highcharts·项目管理图
Hilaku5 小时前
前端不懂业务有多可怕?
前端·javascript·程序员
涛涛ing5 小时前
模型吐出半截JSON,前端如何边收边渲染?2026年AI应用必须闯过的工程关
前端
aixingpan5 小时前
aixingpan.cnAPI开发文档:api_docs_trichart_natal_solar_return_transit2接口指南
前端·php
FRing035 小时前
JavaScript入门到精通二十八(forEach遍历、创建对象的三种方式、构造函数、new实例化执行过程、实例成员和静态成员)
开发语言·前端·javascript
燕落南枝5 小时前
CSS 表单选择器与伪元素选择器详解
前端·css