反应分页-当页面超过一定数量时隐藏页面框

问题描述

这是我目前的设计：

我想做类似下面的事情。
当页码超过一定数量时，
有些页面隐藏并显示为[...]，如下所示。
箭头的作用与下面的链接相同，例如当我的页面是5时，显示1 ... 4 5 6 ... 10

https://material-ui.com/zh/components/pagination/

App.js

const paginate = (pageNumber) => {
    setCurrentPage(pageNumber);
}
      <Pagination postsPerPage={imagePerPage} totalPosts={totalImages} paginate={paginate}/>

Pagination.js

import React,{ useState,useRef,useEffect,useContext } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const Pagination = ({ postsPerPage,totalPosts,paginate }) => {
   const pageNumbers = [];
   const [currentPage,setCurrentPage] = useState(1);

   for (let i = 1; i <= Math.ceil(totalPosts /postsPerPage); i++) {
         pageNumbers.push(i);
   }

   const totalNumOfPages = pageNumbers.length;

   useEffect(() => {
      console.log("Cureent Page:")
      console.log(currentPage);

  },[currentPage]);

return (
<nav>
  <ul className='pagination' style={{width:'100%' }}>
      <li class="page-item" style={{marginLeft:'auto'}}>
      <a class="page-link" aria-label="Previous"
         onClick={() =>{ 
          if (currentPage > 1){
          paginate(currentPage-1);
          setCurrentPage(currentPage-1);
          }
          }
        } 
      >
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    {pageNumbers.map(number => (
    
      <li key={number} 
          className={ `page-item ${(currentPage === number)? 'active' : '' }`}>
        <a onClick={() =>{ paginate(number);setCurrentPage(number)}} className='page-link' >
          {number}
        </a>
      </li>
    ))}
     <li class="page-item" style={{marginRight:'auto'}}>
          <a class="page-link"  aria-label="Next" 
                onClick={() =>{ 
                  if (currentPage < totalNumOfPages){
                    paginate(currentPage+1);
                    setCurrentPage(currentPage+1);
                  }
                  }
                } 
          >
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </a>
     </li>
  </ul>
</nav>
 );
};

export default Pagination;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）