React使用react-paginate实现自定义分页布局相关问题咨询

react-paginate是成熟的分页组件，完全可以满足你的需求，不需要用hack的CSS实现效果，按以下步骤调整即可：

• 首先新增当前页码的状态存储，react-paginate 默认返回的页码从0开始计数，切换页码时同步更新状态：

import { useState } from 'react';

// 组件内部逻辑
const [currentPage, setCurrentPage] = useState(0); // 默认第一页对应值为0

const handlePageClick = (e) => {
  setCurrentPage(e.selected);
  // 补充你自身的分页业务逻辑，比如请求对应页的列表数据
};

• 调整分页模块的DOM结构，直接在对应位置插入你需要的两个自定义展示模块即可，无需改动ReactPaginate的原有配置：

<div className='paginate'>
  {/* 结果统计展示，totalCount为接口返回的总数据条数 */}
  <span className='result-found'>Result found: {totalCount}</span>
  <ReactPaginate 
    previousLabel="Back"
    previousClassName="prev fa fa-caret-left"
    nextLabel="Next"
    nextClassName="next fa fa-caret-right"
    breakLabel="..."
    pageLinkClassName="page-link"
    pageClassName="page"
    breakClassName={""}
    pageCount={total}
    marginPagesDisplayed={1}
    pageRangeDisplayed={4}
    onPageChange={handlePageClick}
    containerClassName="pagination"
    subContainerClassName="pages pagination"
    activeClassName="active"
  />
  {/* 页码总览展示，currentPage+1转为用户熟悉的1开始的计数规则 */}
  <span className="page-overview">第{currentPage + 1}页/共{total}页</span>
</div>

• 最后给外层容器加基础布局样式，即可对齐成目标设计效果：

.paginate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px; /* 按需调整各模块之间的间距 */
}

以上实现完全符合组件原生使用规范，没有任何hack逻辑。

内容的提问来源于stack exchange，提问作者user173420