react使用useImperativeHandle示例详解

更新时间：2022年09月23日 14:11:36 作者：前端兰博

这篇文章主要为大家介绍了react使用useImperativeHandle示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

1.前言

相比大家看到useImperativeHandle会感到十分陌生，但部分开源代码经常会出现它的身影，网上查阅的资料也是含糊不清。经过一翻资料查询，终于摸清了一点，现在分享给各位爷。

2.useImperativeHandle初探

React官网的定义

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。

个人理解

官网的话用大白话解析：useImperativeHandle的作用是将子组件的指定元素暴漏给父组件使用。也就是父组件可以访问到子组件内部的特定元素。

3.获取元素的几种方式

下面我将逐步介绍获取元素的方式，进而引出今天的主角useImperativeHandle。

3.1 useRef：获取组件内部元素

import {useRef} from "react"
export default function() {
  //1.
  const ele = useRef()
  //3.获取元素
  const getElememntP = () => {
    console.log(ele.current)
  }
  return <div >
    <button onClick={()=>getElememntP()}>获取p元素</button>
    //2.
    <p ref={ref}></p>
  </div>
}

点击按钮，我们可以获取到p元素。上面是useRef获取元素的方法，先简单小结下步骤

引入useRef,定义变量
在需要获取的dom元素上使用ref进行变量绑定
使用变量.current获取对应元素

3.2 forwardRef：父组件获取子组件内部的一个元素

上面的useRef在函数组件可以获取自身组件内部的元素，但是如果我们需要在父组件获取或者操作儿子组件的一个元素，此时forwardRef就随之出现了。

father.js

import {useRef} from "react"
import Son from "./son"
export default function(){
  const eleP = useRef()
  const getElement = () => {
    console.log(eleP.current)
  }
  return <div>
    <button onClick={()=>getElement()}>点击获取子组件的p元素</button>
    <Son ref={eleP}/></div>
}

son.js

import {forwardRef} from "react"
export default forwardRef(function(props,ref){
  return <div >
    <p ref={ref}></p>
  </div>
})

父元素点击按钮后，可以获取到儿子组件的p元素。

forwardRef在父组件获取儿子组件内部一个元素时，操作如下。

父组件按照useRef的规则绑定到儿子组件上
儿子组件使用forwardRef包裹，并在函数组件传递的参数接收,第一个参数porps接收父组件传递的数据，第二个ref接收的就是dom引用
在需要获取儿子组件的元素上直接绑定ref的值

3.3 useImperativeHandle：父组件可以获取/操作儿子组件多个元素

经过上面层层递进，终于来到我们今天的主角了，请大声告诉我她的名字：是usexxxHandle。它可以在父组件内部直接获取儿子组件任意的dom元素对象。

father.js

import {useRef} from "react"
import Son from "./son"
export default function(){
  const eleP = useRef()
  const getElement = () => {
    console.log(eleP.current.ele1.current)
    console.log(eleP.current.ele2.current)
  }
  return <div>
    <button onClick={()=>getElement()}>点击获取子组件元素</button>
    <Son ref={eleP}/></div>
}

son.js

import {useRef,forwardRef,useImperativeHandle} from "react"
export default forwardRef(function(props,ref){
  const ele1 = useRef()
  const ele2 = useRef()
  useImperativeHandle(ref,()=>{
    return {ele1,ele2}
  },[])
  return <div >
    <h2 ref={ele1}></h2>
    <h3 ref={ele2}></h3>
  </div>
})

结果

<h2></h2>
<h3></h3>

父组件点击按钮后，可以一次性获取到多个标签元素，通过useImperativeHandle函数内部返回的对象可以获取对应的标签。具体使用直接看例子就行，我列举下useImperativeHandle的参数要求吧

useImperativeHandle(ref,()=>{
    return {dom1,dom2}
},[])

第一个参数是组件的第二个参数ref 第二个参数是一个回调函数，内部返回的对象就是抛给父组件的元素对象第三个参数是一个依赖数组，类似useEffect的依赖数组，如果依赖数组内部传递的数据发生改变，就会重新触发回调函数。

以上就是react使用useImperativeHandle示例详解的详细内容，更多关于react使用useImperativeHandle的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍
这篇文章主要介绍了React路由三种渲染方式、withRouter高阶组件、自定义导航组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
React Native 搭建开发环境的方法步骤
本篇文章主要介绍了React Native 搭建开发环境的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
React组件如何优雅地处理异步数据详解
这篇文章主要为大家介绍了React组件如何优雅地处理异步数据示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
前端 react 实现图片上传前压缩(缩率图)
这篇文章主要介绍了前端 react 实现图片上传前压缩(缩率图),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-08-08
ReactJS入门实例教程详解
React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点，这篇文章主要介绍了ReactJS入门实例教程,需要的朋友可以参考下
2022-06-06
详解react setState
这篇文章主要介绍了react setState的相关资料，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下
2021-04-04
React如何自定义轮播图Carousel组件
这篇文章主要介绍了React如何自定义轮播图Carousel组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
React中项目路由配置与跳转方法详解
这篇文章主要为大家详细介绍了React中项目路由配置与跳转方法的相关资料，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下
2023-08-08
2023年最新react面试题总结大全(附详细答案)
React是一种广泛使用的JavaScript库,为构建用户界面提供了强大的工具和技术,这篇文章主要给大家介绍了关于2023年最新react面试题的相关资料,文中还附有详细答案,需要的朋友可以参考下
2023-10-10
react中路由和按需加载的问题
这篇文章主要介绍了react中路由和按需加载的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08