React自定义分页仅显示3个页码的实现方案问询

要实现每次只显示3个页码，点击下一页切换到下一组页码，可以通过计算当前要显示的页码范围来实现，具体操作如下：

1. 核心逻辑：计算页码显示范围 #

根据当前激活的页码currentPage，算出当前组的起始和结束页码：

• 起始页码：const startPage = Math.floor(currentPage / 3) * 3;（按每3页一组分组）
• 结束页码：const endPage = Math.min(startPage + 3, totalNoOfPages);（避免超出总页数）

2. 修改页码生成代码 #

把原来遍历所有页码的循环，改为只遍历startPage到endPage之间的页码，完整代码如下：

<div className={['paginationContainer', `${totalNoOfElements >= postPerPage ? "" : "hideDisplay"}`].join(' ')}>
    <span onClick={() => { backPage() }}>
        <IoIosArrowBack className={['arrow', `${currentPage > 0 ? "" : "disableCursor"}`].join(' ')} />
    </span>
    {(() => {
        let numberOfPages = [];
        // 计算当前要显示的页码范围
        const startPage = Math.floor(currentPage / 3) * 3;
        const endPage = Math.min(startPage + 3, totalNoOfPages);
        
        for (let i = startPage; i < endPage; i++) {
            numberOfPages.push(
                <a key={i}
                    className={["numberPag", `${currentPage === i ? "activePagBtn" : ""}`].join(' ')}
                    onClick={() => handlePageClick(i)}>
                    {i + 1}
                </a>
            );
        }
        return numberOfPages
    })()}
    <span onClick={() => nextPage()}>
        <IoIosArrowForward className={['arrow', `${currentPage + 1 < totalNoOfPages ? "" : "disableCursor"}`].join(' ')} />
    </span>
</div>

3. 逻辑说明 #

• 当currentPage在0-2区间时，显示第1-3页（对应索引0-2）；
• 点击下一页切换到索引3时，自动切换显示第4-6页；
• 如果总页数不是3的倍数（比如总页数为7），最后一组会显示剩余的页码（如第7页）；
• 原有上/下一页的交互逻辑无需修改，currentPage的变化会自动触发页码组的切换。

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