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

在React中，默认显示5个页码可以通过以下步骤实现：

首先，创建一个名为Pagination的组件，用于显示分页器。

import React from 'react';

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

export default Pagination;

在Pagination组件中，定义一个状态变量currentPage来跟踪当前页码，并初始化为1。

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

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

在render方法中，使用一个循环来生成页码按钮。默认显示5个页码，可以通过currentPage和总页数来计算起始页码和结束页码。

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方法，用于处理页码按钮的点击事件。当点击某个页码按钮时，更新currentPage的值。

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

最后，在需要使用分页器的组件中引入Pagination组件，并传递相应的props。

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

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

export default MyComponent;

这样，就可以在React中实现默认显示5个页码的分页器了。根据实际情况，你可以根据需要修改总页数、样式和其他功能。