首页 > 其他分享 >useImperativeHandle的使用方法

useImperativeHandle的使用方法

时间:2022-10-09 11:59:48浏览次数:80  
标签:current createHandle useImperativeHandle 方法 React 使用 组件 ref

最陌生的hooks: useImperativeHandle-技术圈 (proginn.com)

 

ref 的使用

普通的类组件有实例所以可以用过 React.createRef() 挂载到节点或组件上,然后通过 this 获取到该节点或组件。

class RefTest extends React.Component{
    constructor(props){
        super(props);
        this.myRef=React.createRef();
    }
    componentDidMount(){
        console.log(this.myRef.current);
    }
    render(){
        return <input ref={this.myRef}/>
    }
}

useImperativeHandle 的使用

正常情况下 ref 是不能挂在到函数组件上的,因为函数组件没有实例,但是 useImperativeHandle 为我们提供了一个类似实例的东西。它帮助我们通过 useImperativeHandle 的第 2 个参数,所返回的对象的内容挂载到 父组件的 ref.current 上。

forwardRef会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

语法:

useImperativeHandle(ref, createHandle, [deps])
    • ref
      需要被赋值的ref对象。

    • createHandle
      createHandle函数的返回值作为ref.current的值。

    • [deps]
      依赖数组,依赖发生变化会重新执行createHandle函数。

import React, { forwardRef, useImperativeHandle, useEffect, useRef } from 'react'

const TestRef = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    open() {
      console.log("open")
    }
  }))
})

function App () {
  const ref = useRef()
  useEffect(() => {
    ref.current.open()
  },[])
  
  return(
    <>
      <div>石小阳</div>
      <TestRef ref={ref}></TestRef>
    </>
  )
}
export default App

 

标签:current,createHandle,useImperativeHandle,方法,React,使用,组件,ref
From: https://www.cnblogs.com/domin520Jian/p/16771592.html

相关文章

  • Java中如何使用Scanner类读取.txt文件呢?
    转自:http://www.java265.com/JavaJingYan/202111/16359892761682.html 文件是日常开发中,使用最多的一种东西,在操作系统中,万物都以文件的形式存在,如:磁盘,网络,内存都都以......
  • Ceph使用---CephX认证机制及用户管理
    一、CephX认证机制介绍Ceph使用cephx协议对客户端进行身份认证cephx用于对ceph保存的数据进行认证访问和授权,用于对访问ceph的请求进行认证和授权检测,与mon通信的请求都要......
  • EF Core中的Fluent API方法 (重写OnModelCreating方法中)
    配置FluentAPI方法用法模型配置HasDbFunction()在定位关系数据库时配置数据库功能HasDefaultSchema()指定数据库架构HasAnnotation()在实体上添加或更新数据注释属性......
  • 使用sharding 做分库分表以后,插入报错 Executing an update/delete query
    这个问题倘若没有 sharding,那就是在service层缺少了事务注解@Transaction这个问题具体看这里​ 我是跑测试类跑出来的问题,好像做分库分表,不能用测试类来测,只能通过 con......
  • arthas使用介绍
    arthas使用介绍一、介绍Arthas是阿里巴巴旗下的一款开源的JAVA诊断工具,可以进行线上监控诊断产品,实时查看应用的内存、gc、线程等信息,方便排查线上问题。二、支持的平......
  • 数据导入失败处理方法
    用记事本的方式编辑打开sql先ctrl+H查找COLLATEutf8mb4_0900_ai_ci替换为  utf8_general_ci在替换 utf8mb4为 utf8 将sql文件保存即可 技术贡献者:......
  • C# DevExpress中GridControl控件的基本属性设置和使用方法
    1.GridControl隐藏GroupPanel(主面板)隐藏:鼠标单击RunDesigner-OptionsView-ShowGroupPanel=False;修改:鼠标单击RunDesigner-Appearance-GroupPanelText="检索信息";......
  • 关于Microsoft Office Outlook-邮件搜索方法记录
     Outlook(MicrosoftOffice套装软件组件)一般指MicrosoftOutlookMicrosoftOfficeOutlook是微软办公软件套装的组件之一,它对Windows自带的Outlookexpress的功能进行了扩......
  • 迅为i.MX8MM开发板使用命令控制GPIO
    在文件系统的/sys目录下给用户提供了许多接口,比如在/sys下面的bus目录,这个目录下放置的都是和总线相关的,比如I2C,usb等。如下图所示:​​​​本章我们需要重点关注下cl......
  • 全志V853+XR829 Tina无线网络wifimanger2.0使用指南
    1.主题Tina无线网络wifimanger2.0使用指南2.问题背景产品:所有需要用到无线的产品硬件:V853+XR829软件:Tina4.0+Wi-Fi配置文件下载:https://bbs.aw-ol.com/topic/1867......