纯React轮播Flex盒对齐

以下是一个纯React轮播Flex盒对齐的示例代码：

import React, { useState } from 'react';
import './App.css';

const Carousel = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    'https://example.com/image4.jpg',
  ];

  const handlePrev = () => {
    setActiveIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1));
  };

  const handleNext = () => {
    setActiveIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
  };

  return (
    <div className="carousel">
      <button className="prev-button" onClick={handlePrev}>Previous</button>
      <div className="image-container">
        {images.map((image, index) => (
          <img
            key={index}
            src={image}
            alt={`Image ${index + 1}`}
            className={index === activeIndex ? 'active' : ''}
          />
        ))}
      </div>
      <button className="next-button" onClick={handleNext}>Next</button>
    </div>
  );
};

export default Carousel;

在上面的代码中，我们使用了useState钩子来跟踪当前活动图像的索引。然后，我们在handlePrev和handleNext函数中更新活动索引。在渲染图像时，我们根据索引是否与活动索引匹配来设置适当的类名。这允许我们为活动图像应用一些样式。

你可以根据需要自定义类名和样式，例如carousel类用于容器，prev-button和next-button类用于前进和后退按钮，image-container类用于图像容器等。确保在App.css文件中定义相应的样式。