react写一个亮灯逻辑依次为: 红色显示3秒 绿色显示2秒 黄色显示1秒 三种颜色循环交替显示,要求使用 Promise 实现 页面样式 编写一个显示红绿灯的 HTML 页面,要求使用纯 CSS 实现,效果如图:

好的，关于你的问题，我可以给你提供以下的 React 代码实现：

import React, { useState, useEffect } from "react";

const colors = ["red", "green", "yellow"];

const Light = ({ color, active }) => (
  <div
    className={`light ${color} ${active ? "active" : ""}`}
    style={{ backgroundColor: color }}
  />
);

const Lights = () => {
  const [activeColorIndex, setActiveColorIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setActiveColorIndex((activeColorIndex) => (activeColorIndex + 1) % 3);
    }, 6000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="lights">
      {colors.map((color, index) => (
        <Light
          key={color}
          color={color}
          active={index === activeColorIndex}
        />
      ))}
    </div>
  );
};

export default Lights;

这里使用了 `useState` 和 `useEffect` 来实现灯光的循环显示逻辑。`colors` 是一个数组，其中存储了三种颜色值，即红、绿、黄。`Light` 组件用于显示单个灯光，它接受两个属性值：`color` 和 `active`。前者表示灯光的颜色，后者表示当前灯光是否激活。当一个灯光激活时，它会添加一个名为 `active` 的 CSS 类，用于设置灯光的亮度。`Lights` 组件用于显示三个灯光，并循环显示它们。在组件的 `useEffect` 钩子中，我们使用 `setInterval` 来定时更新 `activeColorIndex` 的值，从而实现灯光的循环显示逻辑。

关于纯 CSS 的实现，可以使用以下代码：

.lights {
  width: 150px;
  height: 450px;
  position: relative;
}

.light {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  opacity: 0.2;
  transition: opacity 0.3s ease-in-out;
}

.red {
  top: 0;
  background-color: red;
}

.green {
  top: 150px;
  background-color: green;
}

.yellow {
  top: 300px;
  background-color: yellow;
}

.active {
  opacity: 1;
}

这里使用了绝对定位和透明度来实现灯光的显示和隐藏。在 `light` 类的样式中，我们设置了 `opacity` 属性为 0.2，表示灯光处于未激活状态时的亮度。在 `active` 类的样式中，我们将 `opacity` 属性设置为 1，从而使得灯光处于激活状态时呈现出最高亮度。使用 `transition` 属性可以让灯光的亮度变化更加平滑。