使用SetTImeout和ReactHooks的TrafficLight

import React, { useState, useEffect } from 'react';

const TrafficLight = () => {
  const [red, setRed] = useState(false);
  const [yellow, setYellow] = useState(false);
  const [green, setGreen] = useState(false);

  // 状态变化的逻辑
  useEffect(() => {
    // 红灯亮10秒后变绿灯
    const redTimeout = setTimeout(() => {
      setRed(true);
      setYellow(false);
      setGreen(false);
    }, 10000);

    // 绿灯亮5秒后变黄灯
    const greenTimeout = setTimeout(() => {
      setRed(false);
      setYellow(true);
      setGreen(false);
    }, 15000);

    // 黄灯亮2秒后变红灯
    const yellowTimeout = setTimeout(() => {
      setRed(false);
      setYellow(false);
      setGreen(true);
    }, 17000);

    // 组件卸载时清除定时器
    return () => {
      clearTimeout(redTimeout);
      clearTimeout(greenTimeout);
      clearTimeout(yellowTimeout);
    };
  }, []);

  // JSX代码
  return (
    <div>
      <div className={`light ${red ? 'red' : ''}`}></div>
      <div className={`light ${yellow ? 'yellow' : ''}`}></div>
      <div className={`light ${green ? 'green' : ''}`}></div>
    </div>
  );
};