在react的函数式组件中，是否可以使用ref的方式，让父组件获取到子组件的状态？

Question

在react的函数式组件中，是否可以使用ref的方式，让父组件获取到子组件的状态的值？

我测试是不能的。

import ChildComp from './components/childComp'
import { useRef } from 'react'

export default function Home() {

  const childRef = useRef(0);

  return (
    <>
      <ChildComp ref={childRef} />  // 这会报错
    </>
  )
}

Answer 1

要通过 ref 获取到子组件内的状态，需要使用 React.forwardRef() 来转发 ref 到子组件，并且要在子组件里使用useImperativeHandle配置返回的ref对象的内容。
这样，子组件就可以将 ref 关联到内部的状态，从而使父组件能够获取到该状态。

例子如下：

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// 子组件
const ChildComponent = forwardRef((props, ref) => {
  const [childState, setChildState] = React.useState('Hello from child!');

  // 暴露方法给父组件，以便获取子组件内的状态
  useImperativeHandle(ref, () => ({
    getChildState: () => childState,
  }));

  return (
    <div>
      <p>{childState}</p>
      <button onClick={() => setChildState('Updated state')}>Update State</button>
    </div>
  );
});

// 父组件
const ParentComponent = () => {
  const childRef = useRef(null);

  const handleButtonClick = () => {
    if (childRef.current) {
      console.log(childRef.current.getChildState()); // 获取子组件的状态值
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleButtonClick}>Get Child State</button>
    </div>
  );
};

export default ParentComponent;