So implementieren Sie Ampeln in React

So implementieren Sie Ampeln in React: 1. Führen Sie „import React, { useEffect, useState } from ‚react‘“ ein. 2. Erstellen Sie die Methode „function App() {...}“. Informationskarten; 4. Die Methode zum Definieren des Lichtblinkens ist „const twinkleFn = ()=>{...}“ 5. Legen Sie die Farbstile Rot, Grün und Gelb fest.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie implementiert man Ampeln in React?

Verwenden Sie React, um Ampeln zu implementieren.

Verwenden Sie React, um einen Signallicht-Controller (Ampel) zu implementieren. Anforderungen:

Standardmäßig ist das rote Licht 20 Sekunden lang eingeschaltet und das grüne Licht blinkt 20 Sekunden in den letzten 5 Sekunden und in den letzten 5 Sekunden. Das gelbe Licht blinkt 10 Sekunden lang in der Reihenfolge: Rot-Grün-Gelb-Rot-Grün-Gelb. Anzahl, Farbe, Dauer, Blinkzeit und Leuchtreihenfolge der Lichter können konfiguriert werden, z. B.: Lichter=[{Farbe: '#fff', Dauer: 10000, funkelnDuration: 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 : &#39;&#39;}`}></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;
}

Empfohlen Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Ampeln in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!