如何从父组件访问并设置多个子组件的状态

我来帮你梳理下这个问题，你遇到的情况其实很常见——想在父组件里统一控制子组件的状态，但又纠结于useRef不更新和状态提升的合理性。咱们一步步来解决：

先说说你当前代码的两个核心问题 #

1. Cell实例重复问题：你用new Array(n).fill(new Array(n).fill(<Cell />))创建cells数组时，所有行的Cell其实都是同一个组件实例（因为fill会复用同一个对象），这会导致点击任何一个Cell时，同一列的所有Cell都会跟着变化，这肯定不是你想要的。
2. Ref未正确绑定：你没有给每个Cell组件绑定单独的ref，所以根本没法通过数组访问到子组件的实例和状态。

方案一：状态提升（React推荐的标准做法） #

你觉得状态提升“不合理”可能是觉得要维护二维状态有点繁琐，但这其实是React单向数据流的核心思想——当多个组件需要共享状态或父组件需要控制子组件状态时，状态应该放在共同的父组件中。这样能保证所有子组件的状态统一，避免出现状态不一致的问题。

改造后的代码如下：

父组件 GameGrid #

import { useState } from 'react';
import Box from '@mui/material/Box';
import { useStyles } from './your-styles-file'; // 替换为你的样式文件路径
import Cell from './Cell';

function GameGrid() {
  const classes = useStyles();
  const n = 10;

  // 初始化二维状态数组，所有Cell默认未激活
  const [cellsActiveState, setCellsActiveState] = useState(
    Array(n).fill().map(() => Array(n).fill(false))
  );

  // 父组件批量处理函数：点击网格反转所有Cell状态
  const handler = () => {
    setCellsActiveState(prevState => 
      prevState.map(row => row.map(isActive => !isActive))
    );
  };

  // 单个Cell点击回调：通知父组件更新对应位置的状态
  const handleCellClick = (rowIndex, colIndex) => {
    setCellsActiveState(prevState => {
      const newState = [...prevState];
      newState[rowIndex][colIndex] = !newState[rowIndex][colIndex];
      return newState;
    });
  };

  return (
    <Box 
      className={classes.grid} 
      sx={{ gridTemplateColumns: `repeat(${n}, 1fr)` }} 
      onClick={handler}
    >
      {/* 用map创建Cell，传递状态和点击回调 */}
      {cellsActiveState.map((row, rowIndex) => 
        row.map((isActive, colIndex) => (
          <Cell 
            key={`${rowIndex}-${colIndex}`}
            active={isActive}
            onClick={() => handleCellClick(rowIndex, colIndex)}
          />
        ))
      )}
    </Box>
  );
}

子组件 Cell（简洁的函数组件版本） #

function Cell({ active, onClick }) {
  return (
    <div 
      className={active ? 'cell activeCell' : 'cell inactiveCell'} 
      onClick={onClick}
    />
  );
}

// 如果坚持使用类组件：
// export default class Cell extends Component {
//   render() {
//     const { active, onClick } = this.props;
//     return (
//       <div 
//         className={active ? 'cell activeCell' : 'cell inactiveCell'} 
//         onClick={onClick}
//       />
//     );
//   }
// }

这个方案的优势：

• 数据流清晰：所有状态由父组件管理，子组件只负责渲染和传递事件。
• 避免了ref带来的组件耦合，完全符合React的设计理念。
• 父组件可以轻松实现各种批量操作（比如一键切换所有Cell状态）。

方案二：使用Ref获取子组件实例（仅特殊场景使用） #

如果确实不想提升状态，也可以通过useRef存储每个子组件的实例，但要注意这种方式会打破单向数据流，子组件状态和父组件ref可能出现不一致，需要谨慎使用。

改造后的父组件代码 #

import { useRef } from 'react';
import Box from '@mui/material/Box';
import { useStyles } from './your-styles-file';
import Cell from './Cell';

function GameGrid() {
  const classes = useStyles();
  const n = 10;

  // 创建二维ref数组，存储每个Cell的类组件实例
  const cellsRef = useRef(Array(n).fill().map(() => Array(n).fill(null)));

  // 父组件批量处理函数：通过ref调用子组件的setState
  const handler = () => {
    cellsRef.current.forEach(row => {
      row.forEach(cellInstance => {
        if (cellInstance) {
          cellInstance.setState(prev => ({ active: !prev.active }));
        }
      });
    });
  };

  return (
    <Box 
      className={classes.grid} 
      sx={{ gridTemplateColumns: `repeat(${n}, 1fr)` }} 
      onClick={handler}
    >
      {/* 给每个Cell绑定ref */}
      {Array(n).fill().map((_, rowIndex) => 
        Array(n).fill().map((_, colIndex) => (
          <Cell 
            key={`${rowIndex}-${colIndex}`}
            ref={el => cellsRef.current[rowIndex][colIndex] = el}
          />
        ))
      )}
    </Box>
  );
}

注意事项： #

• 只有类组件能直接通过ref获取实例；如果是函数组件，需要用forwardRef+useImperativeHandle暴露状态修改方法。
• 子组件内部修改状态时，父组件无法自动感知，容易出现状态不同步的问题。

总结一下，优先选择状态提升的方案，它能让你的代码更易维护、更符合React的设计原则。如果有特殊场景必须用ref，再考虑第二种方案。

内容的提问来源于stack exchange，提问作者k200338 Mahad Hameed