React红绿灯交互代码优化：合并重复函数与简化状态管理方案

数据老陈

2026-9-26

优化实现方案

核心优化点

状态管理优化：删除3个独立的useState，仅用1个状态记录当前点亮的灯ID，未点亮时值为null，减少冗余状态
函数合并：仅保留1个通用切换函数，通过事件对象获取点击元素的ID完成逻辑判断，无需重复编写多份功能近似的函数

完整优化后代码

import "./styles.css";
import React, { useState } from "react";

// 建立ID和对应灯色的映射关系，方便后续扩展修改
const LIGHT_COLOR_MAP = {
  top: "red",
  middle: "yellow",
  bottom: "green"
};

export default function App() {
  // activeLight存当前点亮的灯ID，null代表全灭
  const [activeLight, setActiveLight] = useState(null);

  const toggleLight = (e) => {
    const clickedId = e.target.id;
    // 如果点击的是已经点亮的灯，直接熄灭所有
    if (clickedId === activeLight) {
      setActiveLight(null);
    } else {
      // 否则切换为点击的灯点亮，其余自动熄灭
      setActiveLight(clickedId);
    }
  };

  return (
    <div className="App">
      <div id="traffic-light">
        <button
          id="top"
          style={{ backgroundColor: activeLight === "top" ? LIGHT_COLOR_MAP.top : "white" }}
          onClick={toggleLight}
        />
        <button
          id="middle"
          style={{ backgroundColor: activeLight === "middle" ? LIGHT_COLOR_MAP.middle : "white" }}
          onClick={toggleLight}
        />
        <button
          id="bottom"
          style={{ backgroundColor: activeLight === "bottom" ? LIGHT_COLOR_MAP.bottom : "white" }}
          onClick={toggleLight}
        />
      </div>
    </div>
  );
}