本篇內(nèi)容介紹了“react如何實(shí)現(xiàn)紅綠燈”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、做網(wǎng)站、亞?wèn)|網(wǎng)絡(luò)推廣、微信小程序、亞?wèn)|網(wǎng)絡(luò)營(yíng)銷、亞?wèn)|企業(yè)策劃、亞?wèn)|品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供亞?wèn)|建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

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

用React實(shí)現(xiàn)紅綠燈

用 React 實(shí)現(xiàn)一個(gè)信號(hào)燈（交通燈）控制器，要求：

默認(rèn)情況下，紅燈亮20秒，并且最后5秒閃爍綠燈亮20秒，并且最后5秒閃爍黃燈亮10秒， 次序?yàn)椋杭t-綠-黃-紅-綠-黃。 燈的個(gè)數(shù)、顏色、持續(xù)時(shí)間、閃爍時(shí)間、燈光次序都可配置，如：lights=[{color: '#fff', duration: 10000, twinkleDuration: 5000}, ... ]

import React, { useEffect, useState } from 'react'
import './index.scss'
function App() {
  // 定義當(dāng)前燈的顏色
  const [currentLight, setCurrentLight] = useState('red')
  // 定義當(dāng)前燈在燈列表數(shù)據(jù)中的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
    }
  ]
  
  // 改變當(dāng)前燈在燈map列表的index
  const changeLightFn = () => {
    setLightOn((lightOn + 1) % 3)
  }
  
  // 燈閃爍的方法
  const twinkleFn = ()=>{
    // 閃爍的次數(shù)
    let twinkle_count = 0;
    // 用setInterval定時(shí)調(diào)用設(shè)置等的顏色，實(shí)現(xiàn)當(dāng)前燈顏色亮滅交替閃爍
    let timer = setInterval(()=>{
      // 如果閃爍次數(shù)的當(dāng)前值大于等于當(dāng)前燈的閃爍時(shí)間，就清除計(jì)數(shù)器，進(jìn)入下一個(gè)燈的列表位置
      if (twinkle_count >= lights[lightOn].twinkleDuration/1000) {
        changeLightFn()
        setCurrentLight('') // 等的顏色清空，顯示默認(rèn)灰色
        clearInterval(timer)
        return
      }
      if (twinkle_count % 2 === 0) {
        setCurrentLight(lights[lightOn].color) // 燈亮
      } else {
        setCurrentLight('') // 燈滅
      }
      twinkle_count++ // 燈的當(dāng)前閃爍次數(shù)累加
    }, lights[lightOn].duration)
  }
  useEffect(()=>{
    setCurrentLight(lights[lightOn].color) // 設(shè)置當(dāng)前燈的顏色 -- 燈亮
    setTimeout(()=>{
      twinkleFn()
    }, lights[lightOn].lightTimer) // 當(dāng)達(dá)到前燈亮持續(xù)的時(shí)間，開(kāi)始調(diào)用燈閃爍的方法
  }, [lightOn])
  
  return (
    

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

          )
        })
      }
    
  );
}
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如何實(shí)現(xiàn)紅綠燈”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！