使用分页显示React中的图像列表

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

const ImageList = () => {
  const [images, setImages] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const imagesPerPage = 10; // 每页显示的图像数量

  useEffect(() => {
    // 从服务器获取图像列表数据，或使用静态数据作为示例
    fetch('https://example.com/images')
      .then(response => response.json())
      .then(data => setImages(data));
  }, []);

  // 根据当前页码和每页显示的图像数量截取图像列表数据
  const indexOfLastImage = currentPage * imagesPerPage;
  const indexOfFirstImage = indexOfLastImage - imagesPerPage;
  const currentImages = images.slice(indexOfFirstImage, indexOfLastImage);

  // 切换页码
  const paginate = pageNumber => setCurrentPage(pageNumber);

  return (
    <div>
      {currentImages.map(image => (
        <img key={image.id} src={image.url} alt={image.title} />
      ))}
      <Pagination
        imagesPerPage={imagesPerPage}
        totalImages={images.length}
        paginate={paginate}
      />
    </div>
  );
};

const Pagination = ({ imagesPerPage, totalImages, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalImages / imagesPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map(number => (
          <li key={number} className="page-item">
            <a
              onClick={() => paginate(number)}
              href="#"
              className="page-link"
            >
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default ImageList;