React的forwardRef函数

说明

https://zh-hans.react.dev/reference/react/forwardRef
React的forwardRef 函数允许子组件使用 ref 将 DOM 节点暴露给父组件。

示例

不使用forwardRef，直接通过ref获取子组件不成功

import { useRef } from "react"

// 子组件
function Son() {
  return <input type="text" />
}

// 父组件
function App() {
  const sonRef = useRef(null)
  const showRef = () => {
    console.log(sonRef)

  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={showRef}>点击获取输入框的焦点</button>
    </>
  )
}

export default App

在浏览器中报错：

如果点击按钮，拿到的是空对象，什么都没有拿到：

使用forwardRef函数

import { forwardRef, useRef } from "react"

// 子组件
const Son = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />
})

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

export default App

点击，获得了子组件中的input元素，并且使input输入框获得了焦点：