如何在react中默认显示5个页码

import React from 'react';

class Pagination extends React.Component {
  render() {
    return (
      <div className="pagination">
        {/* 分页器内容 */}
      </div>
    );
  }
}

export default Pagination;

class Pagination extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1
    };
  }

  render() {
    return (
      <div className="pagination">
        {/* 分页器内容 */}
      </div>
    );
  }
}

render() {
  const { currentPage } = this.state;
  const totalPages = 10; // 总页数
  const startPage = Math.max(1, currentPage - 2);
  const endPage = Math.min(totalPages, startPage + 4);

  const pageNumbers = [...Array(endPage - startPage + 1).keys()].map(i => startPage + i);

  return (
    <div className="pagination">
      {pageNumbers.map(page => (
        <button key={page} onClick={() => this.handlePageChange(page)}>
          {page}
        </button>
      ))}
    </div>
  );
}

handlePageChange(page) {
  this.setState({ currentPage: page });
}

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

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 组件内容 */}
        <Pagination />
      </div>
    );
  }
}

export default MyComponent;