React中如何让多个div按时间间隔依次切换类名实现点亮效果？

问题根源 #

你当前的写法存在两个核心问题：

1. 异步定时器的变量捕获问题：JavaScript循环是同步执行的，而setTimeout属于异步任务。当循环执行完毕时，所有setTimeout的回调才开始触发，此时循环变量已经指向数组最后一个元素（side3），所以最终只有最后一个方块被处理。
2. 直接操作DOM不符合React数据流：用getElementById手动添加/移除类名，绕过了React的状态管理机制，容易导致UI与组件状态不一致，也违背了React的设计理念。

正确实现思路 #

通过React状态管理当前点亮的方块，用递归函数实现依次点亮的时序控制：

1. 添加状态管理激活方块
   在Cube组件中定义状态，记录当前处于点亮状态的方块：

import { useState, useEffect } from 'react';

const Cube = () => {
  const [activeSide, setActiveSide] = useState(null);
  const computerMoves = ['side1', 'side2', 'side3']; // 你的测试序列数组
  
  // 递归播放序列的函数
  const playSequence = (sequence, index = 0) => {
    if (index >= sequence.length) {
      setActiveSide(null);
      return;
    }
    // 点亮当前方块
    const currentSide = sequence[index];
    setActiveSide(currentSide);
    
    // 1秒后熄灭，间隔0.5秒再点亮下一个（时间可按需调整）
    setTimeout(() => {
      setActiveSide(null);
      setTimeout(() => {
        playSequence(sequence, index + 1);
      }, 500);
    }, 1000);
  };
  
  // 组件挂载时触发序列播放（或在需要的时机调用）
  useEffect(() => {
    playSequence(computerMoves);
  }, [computerMoves]);
  
  return (
    <div className="cube">
      <div 
        className={`side side1 ${activeSide === 'side1' ? 'on' : ''}`}
      ></div>
      <div 
        className={`side side2 ${activeSide === 'side2' ? 'on' : ''}`}
      ></div>
      <div 
        className={`side side3 ${activeSide === 'side3' ? 'on' : ''}`}
      ></div>
      {/* 其他方块同理 */}
    </div>
  );
};

2. 关键逻辑说明

• 用activeSide状态控制每个方块的on类名，React会自动根据状态更新UI，无需手动操作DOM。
• 递归函数playSequence按顺序处理每个步骤：点亮当前方块→等待1秒熄灭→短暂间隔后处理下一个方块，确保时序完全符合预期。

额外优化建议 #

• 如果需要支持序列中途中断（比如用户提前操作），可以在组件中保存定时器ID，在组件卸载或需要中断时清除定时器。
• 可将点亮时长、间隔时长提取为常量，方便统一调整游戏节奏。

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