轮播组件

渲染一个轮播组件。

• 使用 useState() 钩子创建 active 状态变量，并将其初始值设为 0（第一项的索引）。
• 使用 useEffect() 钩子使用 setTimeout() 更新 active 的值为下一项的索引。
• 在映射轮播项时计算每个轮播项的 className 并应用相应的样式。
• 使用 React.cloneElement() 渲染轮播项，并传递 ...rest 和计算得到的 className。

.carousel {
  position: relative;
}

.carousel-item {
  position: absolute;
  visibility: hidden;
}

.carousel-item.visible {
  visibility: visible;
}

const Carousel = ({ carouselItems, ...rest }) => {
  const [active, setActive] = React.useState(0);
  let scrollInterval = null;

  React.useEffect(() => {
    scrollInterval = setTimeout(() => {
      setActive((active + 1) % carouselItems.length);
    }, 2000);
    return () => clearTimeout(scrollInterval);
  });

  return (
    <div className="carousel">
      {carouselItems.map((item, index) => {
        const activeClass = active === index ? ' visible' : '';
        return React.cloneElement(item, {
          ...rest,
          className: `carousel-item${activeClass}`
        });
      })}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Carousel
    carouselItems={[
      <div>轮播项 1</div>,
      <div>轮播项 2</div>,
      <div>轮播项 3</div>
    ]}
  />
);