react如何实现红绿灯

importReact,{useEffect,useState}from'react'
import'./index.scss'
functionApp(){
//定义当前灯的颜色
const[currentLight,setCurrentLight]=useState('red')
//定义当前灯在灯列表数据中的index
const[lightOn,setLightOn]=useState(2)

//所有灯信息map
constlights=[
{
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
constchangeLightFn=()=>{
setLightOn((lightOn+1)%3)
}

//灯闪烁的方法
consttwinkleFn=()=>{
//闪烁的次数
lettwinkle_count=0;
//用setInterval定时调用设置等的颜色，实现当前灯颜色亮灭交替闪烁
lettimer=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(

{
lights.map((item,index)=>{
return(

)
})
}

);
}
exportdefaultApp

.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;
}