基于React的简单轮播图组件

一个基于React的简单轮播图组件的示例：

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

const Slideshow = ({ images, intervalTime }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) =>
        prevIndex === images.length - 1 ? 0 : prevIndex + 1
      );
    }, intervalTime);

    return () => clearInterval(interval);
  }, [images, intervalTime]);

  return (
    <div className="slideshow">
      {images.map((image, index) => (
        <img
          key={index}
          src={image}
          alt={`Slideshow Image ${index}`}
          className={index === currentIndex ? 'slide active' : 'slide'}
        />
      ))}
    </div>
  );
};

export default Slideshow;

上面的代码演示了一个基本的轮播图组件。它接受两个属性：images和intervalTime。images是一个包含图片URL的数组，表示要在轮播图中显示的图片。intervalTime是图片之间的切换时间间隔（以毫秒为单位）。

在组件内部，我们使用useState钩子来跟踪当前显示的图片的索引（currentIndex）。然后，使用useEffect钩子来设置定时器，以在指定的时间间隔内切换图片。当组件被卸载时，我们清除定时器以避免内存泄漏。

在渲染部分，我们使用map函数遍历images数组，并根据当前索引来决定哪张图片应该处于活动状态。我们为每个图片元素添加一个slide类，并根据当前索引是否等于该元素的索引来添加active类。你可以根据需求自定义CSS样式来美化轮播图。

使用该轮播图组件时，你可以像这样调用它：

import React from 'react';
import Slideshow from './Slideshow';

const App = () => {
  const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  return (
    <div>
      <h1>Slideshow Example</h1>
      <Slideshow images={images} intervalTime={3000} />
    </div>
  );
};

export default App;

在上面的例子中，我们在App组件中定义一个图片数组，并将其作为images属性传递给Slideshow组件。我们还指定了每张图片之间的切换时间间隔为3秒（3000毫秒）。