React Hook 详解：如何让父组件获取子组件的值或方法？

2024-02-05 05:19:44

前言

在 React 中，组件之间的通信是至关重要的。父组件需要获取子组件的值或方法，才能实现有效的数据传递和交互。然而，在函数式组件中，由于函数的无状态性，无法直接访问子组件的状态或方法。为此，React 提供了 useImperativeHandle 和 useRef 两个 Hook，帮助我们解决这一问题。

理解 useImperativeHandle

useImperativeHandle Hook 用于创建父组件可以使用的引用。该 Hook 接受两个参数：

ref：一个 React.Ref 对象，用于存储子组件的引用。
init：一个函数，该函数返回一个对象，包含子组件公开给父组件的方法或属性。

import { useImperativeHandle } from 'react'

const ChildComponent = React.forwardRef((props, ref) => {
  const handleClick = () => {
    console.log('Button clicked!');
  }

  useImperativeHandle(ref, () => ({
    handleClick
  }))

  return <button onClick={handleClick}>Click me!</button>
})

通过上述代码，子组件将 handleClick 方法通过 ref 传递给父组件，父组件就可以使用该方法。

理解 useRef

useRef Hook 用于创建可变引用。该 Hook 接受一个初始值，并返回一个引用该值的 ref 对象。ref 对象是一个 mutable 对象，这意味着它的值可以在整个组件生命周期内更改。

import { useRef } from 'react'

const ChildComponent = () => {
  const countRef = useRef(0)

  const handleClick = () => {
    countRef.current++
    console.log(countRef.current)
  }

  return <button onClick={handleClick}>Count: {countRef.current}</button>
}

在这个例子中，useRef Hook 被用来跟踪按钮的点击次数。countRef.current 属性存储了当前的点击次数，handleClick 方法每次被调用时都会将点击次数加一。

结合使用 useImperativeHandle 和 useRef

useImperativeHandle 和 useRef 两个 Hook 可以结合使用，以便父组件能够获取子组件的值或方法。

import { useImperativeHandle, useRef } from 'react'

const ChildComponent = React.forwardRef((props, ref) => {
  const countRef = useRef(0)

  const handleClick = () => {
    countRef.current++
    console.log(countRef.current)
  }

  useImperativeHandle(ref, () => ({
    getCount: () => countRef.current
  }))

  return <button onClick={handleClick}>Count: {countRef.current}</button>
})

const ParentComponent = () => {
  const childRef = useRef()

  useEffect(() => {
    if (childRef.current) {
      const count = childRef.current.getCount()
      console.log(`The count is: ${count}`)
    }
  }, [childRef])

  return <ChildComponent ref={childRef} />
}

在这个例子中，ChildComponent 组件使用 useRef Hook 跟踪按钮的点击次数。useImperativeHandle Hook 被用来创建一个 ref，父组件可以通过该 ref 访问 ChildComponent 组件的方法。在 ParentComponent 组件中，useEffect Hook 被用来在组件挂载后获取子组件的点击次数。