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的资料请关注脚本之家其它相关文章!