React Hooks开发场景下如何获取子组件的ref实例？

类组件本身存在实例对象，所以绑定ref后可直接拿到完整实例；但函数组件默认没有实例，需要搭配React官方提供的API实现和类组件一致的ref效果。

场景1：子组件为类组件 #

该场景下用法和类组件开发逻辑完全一致，直接用useRef创建ref对象绑定到子组件即可：

import { useRef } from 'react'
import ChildClass from './ChildClass'

function Parent() {
  const childRef = useRef(null)

  const handleGetInstance = () => {
    // childRef.current 即为子组件完整实例，可直接调用子组件方法、访问state等
    console.log(childRef.current)
  }

  return (
    <div>
      <ChildClass ref={childRef} />
      <button onClick={handleGetInstance}>获取子组件实例</button>
    </div>
  )
}

场景2：子组件为函数组件 #

需要按以下两步操作实现和类组件一致的效果：

• 子组件用React.forwardRef包裹，接收父组件传递的ref参数完成转发
• 配合useImperativeHandle自定义要暴露给父组件的实例内容

子组件代码示例 #

import { forwardRef, useImperativeHandle, useState } from 'react'

const ChildFunction = forwardRef((props, ref) => {
  const [count, setCount] = useState(0)

  const addCount = () => setCount(prev => prev + 1)
  const resetCount = () => setCount(0)

  // 自定义暴露给父组件的所有实例属性和方法，和类组件实例效果完全一致
  useImperativeHandle(ref, () => ({
    count,
    addCount,
    resetCount
    // 其他需要对外暴露的内容都可以在此处添加
  }))

  return <div>当前计数：{count}</div>
})

export default ChildFunction

父组件代码示例 #

父组件的用法和绑定类子组件的逻辑完全相同：

import { useRef } from 'react'
import ChildFunction from './ChildFunction'

function Parent() {
  const childRef = useRef(null)

  const handleOperateChild = () => {
    // 直接调用子组件暴露的方法、访问属性，和类组件实例使用无差异
    childRef.current.addCount()
    console.log('子组件当前计数：', childRef.current.count)
  }

  return (
    <div>
      <ChildFunction ref={childRef} />
      <button onClick={handleOperateChild}>操作子组件</button>
    </div>
  )
}

注意：仅在必须父组件直接操作子组件的场景下使用该方案，优先通过props传递状态和回调实现逻辑更符合React单向数据流的设计规范。

内容的提问来源于stack exchange，提问作者Bruno