react如何實現紅綠燈

本篇內容介紹了“react如何實現紅綠燈”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

react實現紅綠燈的方法：1、引入“import React, { useEffect, useState } from 'react'”；2、創建“function App() {...}”方法；3、定義所有燈信息map；4、定義燈閃爍的方法為“const twinkleFn = ()=>{...}”；5、設置紅綠黃顏色樣式即可。

用React實現紅綠燈

用 React 實現一個信號燈（交通燈）控制器，要求：

默認情況下，紅燈亮20秒，并且最后5秒閃爍綠燈亮20秒，并且最后5秒閃爍黃燈亮10秒， 次序為：紅-綠-黃-紅-綠-黃。 燈的個數、顏色、持續時間、閃爍時間、燈光次序都可配置，如：lights=[{color: '#fff', duration: 10000, twinkleDuration: 5000}, ... ]

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

“react如何實現紅綠燈”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！