React中父组件如何获取多个同类型子组件的指定state？

首先明确React的单向数据流规则：默认情况下父组件无法直接读取子组件的内部state，也不推荐直接打破这个规则。根据你的需求，有两种成熟实现方案：

方案1：状态提升（优先推荐，最符合React设计理念） #

将原本存放在子组件的filled状态提升到父组件统一管理，子组件通过props接收状态值和修改状态的方法。这种方案不需要处理ref，逻辑更清晰易维护，是大部分场景下的最优解。
示例代码如下：

const Parent = (props) => {
  // 父组件统一管理三个子组件的filled状态
  const [childFilled, setChildFilled] = useState([false, false, false]);

  // 可随时访问任意子组件的filled状态，比如获取第二个子组件的值：childFilled[1]
  const handleGetAllFilled = () => {
    console.log('所有子组件的filled状态：', childFilled);
  }

  const updateChildFilled = (index, value) => {
    const newFilled = [...childFilled];
    newFilled[index] = value;
    setChildFilled(newFilled);
  }

  return (
    <div>
      <Child filled={childFilled[0]} setFilled={(val) => updateChildFilled(0, val)}/>
      <Child filled={childFilled[1]} setFilled={(val) => updateChildFilled(1, val)}/>
      <Child filled={childFilled[2]} setFilled={(val) => updateChildFilled(2, val)}/>
      <button onClick={handleGetAllFilled}>获取所有子组件状态</button>
    </div>
  );
}


const Child = (props) => {
  // 子组件内部不再单独维护filled状态，直接使用props传入的值和方法
  return (
    <div onClick={() => props.setFilled(!props.filled)}>
      {props.filled ? '已填充' : '未填充'}
    </div>
  );
}

方案2：useRef + forwardRef + useImperativeHandle（仅特殊场景使用） #

如果你的场景确实需要把filled状态保留在子组件内部，可以用这套组合API实现子组件对外暴露指定属性/方法，父组件通过ref访问。
你提到的useRef确实是这个方案的核心之一，通过给每个子组件绑定不同的ref就能定位到对应的子组件实例。
示例代码如下：

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

const Parent = (props) => {
  // 给每个子组件创建独立的ref用来定位
  const childRefs = useRef([
    { current: null },
    { current: null },
    { current: null }
  ]);

  // 通过ref访问任意子组件的filled状态，比如获取第二个子组件的值：childRefs.current[1].current.getFilled()
  const handleGetAllFilled = () => {
    const allFilled = childRefs.current.map(ref => ref.current.getFilled());
    console.log('所有子组件的filled状态：', allFilled);
  }

  return (
    <div>
      <Child ref={childRefs.current[0]}/>
      <Child ref={childRefs.current[1]}/>
      <Child ref={childRefs.current[2]}/>
      <button onClick={handleGetAllFilled}>获取所有子组件状态</button>
    </div>
  );
}

// 用forwardRef包裹子组件，接收父组件传入的ref
const Child = forwardRef((props, ref) => {
  const [filled, setFilled] = useState(false);

  // 对外暴露指定的方法，父组件可以通过ref调用
  useImperativeHandle(ref, () => ({
    getFilled: () => filled
  }));

  return (
    <div onClick={() => setFilled(!filled)}>
      {filled ? '已填充' : '未填充'}
    </div>
  );
});

注意：这个方案会打破React的单向数据流，增加组件耦合度，仅在状态提升会导致逻辑极度复杂的特殊场景下使用。

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