react通过ref获取函数子组件实例方法

这篇具有很好参考价值的文章主要介绍了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()?

react通过ref获取函数子组件实例方法,HTML前端,react.js,前端,前端框架

所以它提示你是否使用 forwardRef 将子组件包裹一下:react通过ref获取函数子组件实例方法,HTML前端,react.js,前端,前端框架

包裹一下之后就不会报错了,而且也可以拿到子组件实例了:但是子组件实例上面啥都没有,是一个空对象?react通过ref获取函数子组件实例方法,HTML前端,react.js,前端,前端框架

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

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

react通过ref获取函数子组件实例方法,HTML前端,react.js,前端,前端框架

这时候再看一下获取到的子组件实例:就有了子组件暴露出去的函数,就可以调用了react通过ref获取函数子组件实例方法,HTML前端,react.js,前端,前端框架文章来源地址https://www.toymoban.com/news/detail-666779.html

到了这里,关于react通过ref获取函数子组件实例方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React 使用 useRef() 获取循环中所有子组件实例

    之前项目中使用了 antd pro 中的 可编辑表格 (EditableProTable) ,在页面中表格要经过多层遍历后组成的新页面,所以我将之抽成了一个公用的组件,另外在遍历的最外层需要通过一个按钮统一提交表格数据,但是提交数据之前需要对每一个表格进行非空校验。 遍历中引入组件这

    2024年02月11日
    浏览(32)
  • vue中使用this.$refs获取不到子组件的方法,属性方法都为undefined的解决方法

    因为注册了多个ref,获取是不能单单知识refs.xxx,需要使用数组和索引来获取具体一个组件refs[index].xxx 额……就像这样😐 好这么一写,导致前两个组件都无法正常使用…… 页面也会有这个报错: 组件名 - did you register the component correctly? For recursive components, make sure to provide

    2024年02月13日
    浏览(50)
  • React三种通过属性传递组件本身的方法

    直接传递 JSX 创建好的元素 把要传递的组件作为 JSX 元素写在属性值里,然后在接收的组件里用 {this.props.xxx} 来渲染。这种方法的优点是直观和灵活,缺点是可能造成不必要的重复渲染。 直接传递 JSX 创建好的元素的方法会造成不必要的渲染,是因为每次父组件重新渲染时,

    2024年02月12日
    浏览(38)
  • React:高阶组件|ref转发

            参考文档:高阶组件 – React (reactjs.org)         高阶组件(Higher-Order Components,简称  HOC )是React中用于复用组件逻辑的一种高级技巧。具体而言: 高阶组件是参数为组件,返回值为新组件的函数 。         组件是将 props 转换为 UI,而高阶组件是将组件转换

    2024年02月21日
    浏览(42)
  • unity 之 GetComponent 获取游戏对象上组件实例方法

    GetComponent 是Unity引擎中用于获取游戏对象上组件实例的方法。它允许您从游戏对象中获取特定类型的组件,以便在脚本中进行操作和交互。 GetComponent ComponentType (): 这是一个泛型方法,用于从当前游戏对象上获取指定类型的组件。在 ComponentType 部分,您应该提供您想要获取的

    2024年02月02日
    浏览(45)
  • React 组件的3大属性: refs

    Refs(引用)是 React 中用于访问组件中的 DOM 元素或其他 React 组件实例的一种机制。它们提供了一种途径,使你可以在React中直接操作和访问DOM元素,或者在React组件之间进行通信。 用途: 焦点的管理、文本的选择、媒体的播放; 强制触发动画; 继承三方 DOM 库; 字符串 R

    2024年02月06日
    浏览(41)
  • 29 - ref 和 $refs 获取dom和组件

    作用: 利用 ref  和 $refs 可以用于 获取 dom 元素 , 或 组件实例 特点: 查找范围 - 当前组件内(更精确稳定) 1. 获取 dom:         (1). 目标标签 - 添加 ref属性         (2). 恰当时机,通过this.$refs.xxx,获取目标标签         代码示例:   2. 获取组件         (1). 目标组件 - 添加 r

    2024年02月11日
    浏览(36)
  • React 中的 ref 如何操作 dom节点,使输入框获取焦点

    .focus() 获取焦点 当用户点击按钮时, handleClick 函数会被调用,从而将焦点聚焦到文本输入框上。 定义一个名为 handleClick 的函数。当按钮被点击时,这个函数会被调用。在函数内部,我们通过 inputRef.current 获取到 inputRef 引用所指向的 DOM 元素,并调用其 focus 方法,将焦点聚

    2024年02月09日
    浏览(43)
  • React Native Ref转发/Memo缓存/HOC高阶组件/Context上下文

    1、使用自定义组件时,实现外层组件对原始组件(TextInput)的操作 外层组件使用 ref 属性 子组件使用 forwardRef 包裹 2、函数式组件对外暴露实例方法(cusomFocus) 子组件 父组件如图一所示 1 、 避免多余渲染 问题:每次点击按钮都会导致 InfoView 组件发生重绘,即使每次 setI

    2024年01月21日
    浏览(50)
  • vue3中ref获取子组件的值

    一、 script setup 通过ref获取子组件的值或方法 父组件: 子组件: 二、setup()通过ref获取子组件值 父组件: 子组件:

    2024年02月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包