尝试使用React Bootstrap分页显示数组中的项

npm install react react-dom
npm install react-bootstrap bootstrap

import React from 'react';
import { Pagination } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

render() {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'];
  // 其他组件代码
}

render() {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'];
  const itemsPerPage = 3; // 每页显示的项数
  const totalPages = Math.ceil(items.length / itemsPerPage); // 总页数

  // 根据当前页码和每页显示的项数，计算当前页应该显示的项
  const currentPage = 1; // 当前页码
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentItems = items.slice(startIndex, endIndex);

  return (
    <div>
      {/* 显示当前页的项 */}
      {currentItems.map((item, index) => (
        <div key={index}>{item}</div>
      ))}

      {/* 分页组件 */}
      <Pagination>
        {Array.from({ length: totalPages }, (_, index) => (
          <Pagination.Item key={index} active={index + 1 === currentPage}>
            {index + 1}
          </Pagination.Item>
        ))}
      </Pagination>
    </div>
  );
}