React：useImperativeHandle

说明

https://zh-hans.react.dev/reference/react/useImperativeHandle
useImperativeHandle 是 React 中的一个 Hook，它能让你自定义由 ref 暴露出来的句柄，通过ref暴露子组件中的方法。

示例

import { forwardRef, useImperativeHandle, useRef } from "react"

// 子组件
const Son = forwardRef((props, ref) => {
  // 在子组件内定义实现聚焦的函数
  const inputRef = useRef(null)
  const focusHandler = () => {
    inputRef.current.focus()
  }

  // 把子组件的聚焦方法暴露出去
  useImperativeHandle(ref, () => {
    return {
      // 要暴露出去的方法
      focusHandler
    }
  })
  return <input type="text" ref={inputRef} />
})

// 父组件
function App() {
  const sonRef = useRef(null)
  const focusHandler = () => {
    console.log(sonRef.current)
    sonRef.current.focusHandler()
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={focusHandler}>点击获取输入框的焦点</button>
    </>
  )
}

export default App

点击按钮，打印出了获得的子组件的方法，并且实现了子组件输入框的聚焦：