react怎么实现红绿灯

import React, { useEffect, useState } from 'react' import './index.scss' function App() {   // 定义当前灯的颜色   const [currentLight, setCurrentLight] = useState('red')   // 定义当前灯在灯列表数据中的index   const [lightOn, setLightOn] = useState(2)      // 所有灯信息map   const lights=[     {       color: 'red',        lightTimer: 5000,       duration: 1000,        twinkleDuration: 5000     },     {       color: 'green',        lightTimer: 4000,       duration: 1000,        twinkleDuration: 5000     },     {       color: 'yellow',        lightTimer: 3000,       duration: 1000,        twinkleDuration: 0     }   ]      // 改变当前灯在灯map列表的index   const changeLightFn = () => {     setLightOn((lightOn + 1) % 3)   }      // 灯闪烁的方法   const twinkleFn = ()=>{     // 闪烁的次数     let twinkle_count = 0;     // 用setInterval定时调用设置等的颜色，实现当前灯颜色亮灭交替闪烁     let timer = setInterval(()=>{       // 如果闪烁次数的当前值大于等于当前灯的闪烁时间，就清除计数器，进入下一个灯的列表位置       if (twinkle_count >= lights[lightOn].twinkleDuration/1000) {         changeLightFn()         setCurrentLight('') // 等的颜色清空，显示默认灰色         clearInterval(timer)         return       }       if (twinkle_count % 2 === 0) {         setCurrentLight(lights[lightOn].color) // 灯亮       } else {         setCurrentLight('') // 灯灭       }       twinkle_count++ // 灯的当前闪烁次数累加     }, lights[lightOn].duration)   }   useEffect(()=>{     setCurrentLight(lights[lightOn].color) // 设置当前灯的颜色 -- 灯亮     setTimeout(()=>{       twinkleFn()     }, lights[lightOn].lightTimer) // 当达到前灯亮持续的时间，开始调用灯闪烁的方法   }, [lightOn])      return (     <div>       {         lights.map((item, index) => {           return (             <p key={index}><span className={`light ${item.color === currentLight ? item.color : ''}`}></span></p>           )         })       }     </div>   ); } export default App

.light {     display: inline-block;     width: 100px;     height: 100px;     border-radius: 50%;     background: gray; } .red {     background-color: red; } .green {     background-color: green; } .yellow {     background-color: yellow; }