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

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

相关推荐
孜孜不倦不忘初心几秒前
mac安装nvm及问题记录
前端·node.js
Richar3 分钟前
Object.freeze()注意事项
前端·javascript
TA远方3 分钟前
【HTML】JavaScript Canvas 图像截取与保存完整指南
前端·javascript·html·canvas·截图·截取
Asize4 分钟前
JavaScript 数据类型解析:从 null 与 undefined 的迷思到栈堆内存真相
前端·javascript·面试
anyup7 分钟前
分享 5 套 uni-app 实用主题,一键适配暗黑模式
前端·uni-app·视觉设计
李白的天不白8 分钟前
vue3 ts 配置smartadmin相关配置
前端
起这个名字26 分钟前
Typescript 装饰器执行顺序
前端
LDX前端校草27 分钟前
position属性值及用法
前端·javascript·面试
Bigfish_coding32 分钟前
前端转agent-第一周【python】-05 Ollama+Qwen3实战:会话记忆实战
前端
x***r15134 分钟前
.NET 10 SDK 安装教程(dotnet-sdk-10.0.100-win-x64详细步骤)
java·服务器·前端