- useImperativeHandle 和 React.forwardRef 必须是配合使用的。useImperativeHandle
可以让你在使用 ref 时自定义暴露给父组件的实例值
useImperativeHandle(ref, createHandle, [deps])
第一个参数是组件的第二个参数ref 第二个参数是一个回调函数,内部返回的对象就是抛给父组件的元素对象 第三个参数是一个依赖数组,类似useEffect的依赖数组,如果依赖数组内部传递的数据发生改变,就会重新触发回调函数
实例
// father.js
import {useRef} from "react"
import Son from "./son"
export default function(){
const eleP = useRef() // 定义一个ref对象
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>