react写一个亮灯逻辑依次为: 红色显示3秒 绿色显示2秒 黄色显示1秒 三种颜色循环交替显示,要求使用 Promise 实现

好，这里是使用 Promise 实现的 React 代码：

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

const colors = ["red", "green", "yellow"];
const durations = [3000, 2000, 1000];

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

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

  useEffect(() => {
    async function loop() {
      while (true) {
        for (let i = 0; i < colors.length; i++) {
          setActiveColorIndex(i);
          await new Promise((resolve) => setTimeout(resolve, durations[i]));
        }
      }
    }
    loop();
  }, []);

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

export default Lights;

这里我们定义了 `colors` 和 `durations` 两个数组，分别表示每种颜色对应的亮灯时长。在 `useEffect` 钩子中，我们使用了一个 `async` 函数来实现灯光的循环显示逻辑。函数中使用一个 `while` 循环来不断循环显示三种颜色的灯光。在每次循环中，使用 `for` 循环依次显示三种颜色的灯光，设置当前激活的颜色索引，并使用 `setTimeout` 函数来延时显示下一个灯光。注意，在 `setTimeout` 函数中，我们使用了 `resolve` 函数来实现 Promise 的状态变更。

这里的纯 CSS 样式和前面的示例代码相同，不再重复给出。