React中不修改子组件结构，如何从父组件获取子组件状态？

方法一：使用 forwardRef + useImperativeHandle 暴露子组件状态 #

这是对现有子组件结构侵入最小的方案，仅需给子组件添加少量ref相关逻辑，完全保留其内部状态的使用方式。

实现步骤： #

• 用React.forwardRef包裹子组件，允许父组件向子组件传递ref
• 用useImperativeHandle定义父组件可通过ref调用的方法，用于返回子组件当前状态
• 父组件创建ref数组存储所有子组件的实例引用
• 点击聚合按钮时，遍历ref数组调用子组件暴露的方法，收集并聚合状态

修改后代码： #

import React, { useState, useRef, forwardRef, useImperativeHandle } from "react";

export function App(props) {
  // 初始化存储子组件ref的数组
  const childRefs = useRef([
    React.createRef(),
    React.createRef(),
    React.createRef()
  ]);

  const handleAggregate = () => {
    const allChildData = childRefs.current.map((ref, index) => {
      // 调用子组件暴露的方法获取最新状态
      const childData = ref.current?.getCurrentState();
      return {
        name: `child${index + 1}`,
        data: childData
      };
    });
    console.log("所有子组件状态：", allChildData);
    // 此处执行聚合逻辑
  };

  return (
    <>
      <div className="App">
        <Child ref={childRefs.current[0]} name="child1"></Child>
        <Child ref={childRefs.current[1]} name="child2"></Child>
        <Child ref={childRefs.current[2]} name="child3"></Child>
      </div>
      <div>
        <button onClick={handleAggregate}>打印所有子组件状态数据</button>
      </div>
    </>
  );
}

// 用forwardRef包裹子组件，接收父组件传递的ref
const Child = forwardRef((props, ref) => {
  const { name } = props;
  const [data, setData] = useState("");

  // 向父组件暴露获取当前状态的方法，依赖data确保状态更新后父组件能拿到最新值
  useImperativeHandle(ref, () => ({
    getCurrentState: () => data
  }), [data]);

  return (
    <div>
      <input onChange={(e) => setData(e.target.value)}></input>
      <p>
        {name}的输入值：{data}
      </p>
    </div>
  );
});

// 给子组件设置displayName，方便调试
Child.displayName = "Child";

方法二：通过回调函数实时同步状态到父组件 #

如果允许给子组件新增一个回调prop（不修改原有状态的内部使用逻辑），可以让子组件在状态变化时主动同步到父组件，父组件维护一份状态副本。这种方式更符合React单向数据流的设计。

修改后代码： #

import React, { useState } from "react";

export function App(props) {
  // 父组件维护所有子组件状态的副本
  const [allChildData, setAllChildData] = useState({
    child1: "",
    child2: "",
    child3: ""
  });

  // 子组件状态更新时的回调函数
  const handleChildUpdate = (name, value) => {
    setAllChildData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleAggregate = () => {
    const aggregatedData = Object.entries(allChildData).map(([name, data]) => ({name, data}));
    console.log("所有子组件状态：", aggregatedData);
    // 此处执行聚合逻辑
  };

  return (
    <>
      <div className="App">
        <Child name="child1" onUpdate={handleChildUpdate}></Child>
        <Child name="child2" onUpdate={handleChildUpdate}></Child>
        <Child name="child3" onUpdate={handleChildUpdate}></Child>
      </div>
      <div>
        <button onClick={handleAggregate}>打印所有子组件状态数据</button>
      </div>
    </>
  );
}

const Child = (props) => {
  const { name, onUpdate } = props;
  const [data, setData] = useState("");

  const handleChange = (e) => {
    const value = e.target.value;
    setData(value);
    // 调用父组件传递的回调，同步最新状态
    onUpdate(name, value);
  };

  return (
    <div>
      <input onChange={handleChange}></input>
      <p>
        {name}的输入值：{data}
      </p>
    </div>
  );
};

方案对比 #

• 方法一：几乎不改动子组件原有逻辑，仅新增ref相关代码，适合完全不想修改子组件内部状态使用方式的场景；缺点是打破了React单向数据流，属于命令式获取状态。
• 方法二：符合React单向数据流设计，父组件通过状态副本实现聚合；缺点是需要给子组件新增一个onUpdateprop，但不会影响原有状态的内部引用逻辑。

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