React-Paginate在previousLabel前、nextLabel后添加按钮失效如何解决

效果对比 #

当前运行效果	预期效果

实现思路 #

React-Paginate本身未内置首页、尾页的配置prop，无需强行修改组件内部属性，直接在组件外层自定义两个按钮和分页组件拼接即可，实现简单且灵活度高。

代码修改 #

JSX 代码 #

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import ReactPaginate from 'react-paginate';
import './styles.css'
 
export default function App() {
  const [postsPerPage] = useState(5);
  const [offset, setOffset] = useState(1);
  const [posts, setAllPosts] = useState([]);
  const [pageCount, setPageCount] = useState(0)
 
  const getPostData = (data) => {
    return (
      data.map(post => <div className="container" key={post.id}>
        <p>User ID: {post.id}</p>
        <p>Title: {post.title}</p>
      </div>)
    )
  }
 
  const getAllPosts = async () => {
    const res = await axios.get(`https://jsonplaceholder.typicode.com/posts`)
    const data = res.data;
    const slice = data.slice(offset - 1 , offset - 1 + postsPerPage)
    const postData = getPostData(slice)
    setAllPosts(postData)
    setPageCount(Math.ceil(data.length / postsPerPage))
  }
 
  const handlePageClick = (event) => {
    const selectedPage = event.selected;
    setOffset(selectedPage + 1)
  };

  // 跳转首页逻辑
  const goToFirstPage = () => {
    if (offset === 1) return
    setOffset(1)
  }

  // 跳转尾页逻辑
  const goToLastPage = () => {
    if (offset === pageCount) return
    setOffset(pageCount)
  }
 
  useEffect(() => {
    getAllPosts()
  }, [offset])
 
  return (
    <div className="main-app">
      {/* 展示列表内容 */}
      {posts}
 
      {/* 分页容器，包裹自定义按钮和ReactPaginate */}
      <div className="pagination-wrapper">
        {/* 首页按钮 */}
        <button 
          className="page-btn" 
          onClick={goToFirstPage}
          disabled={offset === 1}
        >
          首页
        </button>

        {/* 原有React Paginate组件 */}
        <ReactPaginate
          previousLabel={"上一页"}
          nextLabel={"下一页"}
          breakLabel={"..."}
          breakClassName={"break-me"}
          pageCount={pageCount}
          onPageChange={handlePageClick}
          containerClassName={"pagination"}
          subContainerClassName={"pages pagination"}
          activeClassName={"active"} 
          disabledClassName={"disabled"}
        />

        {/* 尾页按钮 */}
        <button 
          className="page-btn" 
          onClick={goToLastPage}
          disabled={offset === pageCount}
        >
          尾页
        </button>
      </div>
    </div>
  );
}

CSS 代码 #

在你原有样式基础上添加以下代码即可：

/* 分页外层容器样式 */
.pagination-wrapper {
  margin-top: 45px;
  display: flex;
  align-items: center;
}

/* 首页/尾页按钮样式，和原有分页按钮保持一致 */
.page-btn {
  border: 1px solid #47ccde;
  padding: 5px 10px;
  color: #47ccde;
  background-color: azure;
  cursor: pointer;
  font-size: inherit;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 调整原有pagination的边距 */
.pagination {
  margin: 0 4px;
  display: flex;
  list-style: none;
  outline: none;
  padding: 0;
}

/* 分页按钮禁用状态样式 */
.pagination .disabled a {
  opacity: 0.5;
  cursor: not-allowed;
}

功能说明 #

修改后可直接实现需求，同时新增了按钮禁用逻辑：当前处于第一页时，首页、上一页按钮自动禁用；当前处于最后一页时，下一页、尾页按钮自动禁用，避免无效操作。

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