react函数组件如何实现ref

// 父组件
const PComp = props => {
    const myRef = useRef()                    // 初始化一个ref实例

    const getChildVal = myRef.current.foo     // 获取子组件处理后的ref暴露的值

    return ( <ChildComp ref={myRef} /> )      // 引用子组件
}

// 子组件
import { useImperativeHandle, forwardRef } from 'react'

const ChildComp = props => {
  // useImperativeHandle：第一个参数是ref对象，第二个参数是一个方法，指定该ref对象所暴露的内容
  useImperativeHandle(props.cRef, () => {    
    return {
      foo:222,
      bar:()=>{}
    }
  })
}

export default ChildComp

 

React hooks 里关于这部分的几个概念，已经有博主总结得挺好了 https://blog.csdn.net/qq_24724109/article/details/103817607

useRef：用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件，并调用相对应子组件中的方法)
useImperativeHandle：在函数式组件中，用于定义暴露给父组件的ref方法。
React.forwardRef：将ref父类的ref作为参数传入函数式组件中，本身props只带有children这个参数，这样可以让子类转发父类的ref,当父类把ref挂在到子组件上时，子组件外部通过forwrardRef包裹，可以直接将父组件创建的ref挂在到子组件的某个dom元素上