react组件轮播图

以下是一个简单的React轮播图组件的示例代码：

import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './Carousel.css';
 
const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const timeoutRef = useRef(null);
 
  const handleNext = () => {
    clearTimeout(timeoutRef.current);
    setCurrentIndex((currentIndex + 1) % images.length);
    timeoutRef.current = setTimeout(handleNext, 3000); // 自动播放
  };
 
  useEffect(() => {
    timeoutRef.current = setTimeout(handleNext, 3000);
    return () => clearTimeout(timeoutRef.current);
  }, []);
 
  return (
    <div className="carousel">
      {images.length > 0 && (
        <img src={images[currentIndex]} alt="Carousel" />
      )}
      <button onClick={handleNext}>Next</button>
    </div>
  );
};
 
Carousel.propTypes = {
  images: PropTypes.array.isRequired,
};
 
export default Carousel;

这个组件使用了函数组件和Hooks API来处理状态和副作用。它有一个images属性，该属性是一个包含轮播图图片链接的数组。组件使用setTimeout实现自动播放功能，并使用useRef来存储定时器的引用，以确保可以在组件卸载时清除定时器。