【react】useImperativeHandle和forwardRef的使用

• 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>