React中使用原生JS实现带省略号分页的逻辑调整

你原有逻辑的核心问题是硬编码省略号插入位置+while循环跳指针的写法容错性太差，只要边界条件没覆盖全就会出现显示错位、多插漏插省略号的问题。

核心实现思路 #

不要在循环里边判断页码边插省略号，拆成两步做逻辑会清晰很多，从根源上避免判断混乱：

1. 先把所有需要展示为数字按钮的页码收集起来，做去重、升序排序
2. 遍历排序好的数字页码数组，只有当两个相邻要显示的数字页码差值大于2时，才在中间插入一个省略号；如果差值刚好为2，直接补上中间缺失的单个页码即可，不需要加省略号。

可直接复用的实现代码 #

先写分页生成函数，完全匹配你给出的显示预期：

function generatePagination(currentPage, totalPageCount) {
  // 总页数小于等于6时直接返回所有页码，不需要省略号
  if (totalPageCount <= 6) {
    return Array.from({ length: totalPageCount }, (_, i) => i + 1);
  }
  const pageSet = new Set();
  // 处理头部显示：当前页距开头不足3页时，直接展示前3页，否则只固定展示第1页
  const headShowCount = currentPage <= 3 ? 3 : 1;
  for (let i = 1; i <= headShowCount; i++) {
    pageSet.add(i);
  }
  // 处理尾部显示：当前页距结尾不足3页时，直接展示最后3页，否则只固定展示最后1页
  const tailStart = currentPage >= totalPageCount - 2 ? totalPageCount - 2 : totalPageCount;
  for (let i = tailStart; i <= totalPageCount; i++) {
    pageSet.add(i);
  }
  // 加入当前页及前后相邻1页，做边界处理防止页码越界
  for (let i = Math.max(1, currentPage - 1); i <= Math.min(totalPageCount, currentPage + 1); i++) {
    pageSet.add(i);
  }
  // 转成升序数组
  const sortedPages = Array.from(pageSet).sort((a, b) => a - b);
  const finalPagination = [];
  // 遍历补全中间的省略号/缺失的单个页码
  for (let i = 0; i < sortedPages.length; i++) {
    finalPagination.push(sortedPages[i]);
    if (i < sortedPages.length - 1) {
      const gap = sortedPages[i + 1] - sortedPages[i];
      if (gap === 2) {
        // 两页差2，直接补中间的页码，不用省略号
        finalPagination.push(sortedPages[i] + 1);
      } else if (gap > 2) {
        // 差值大于2才补省略号
        finalPagination.push('...');
      }
    }
  }
  return finalPagination;
}

效果验证（总页数=45） #

• 当前页=1：返回[1,2,3,'...',45]，完全匹配预期
• 当前页=3：返回[1,2,3,4,'...',45]（如果确实需要1和2之间加省略号，只需要把头部判断的阈值从currentPage <=3改成currentPage <=2即可，规则调整非常灵活）
• 当前页=4：返回[1,'...',3,4,5,'...',45]，符合预期
• 当前页=44/45：返回[1,'...',43,44,45]，完全匹配预期

渲染逻辑修正 #

你原有渲染代码有两个小问题，一是多个省略号场景下key重复会触发React警告，二是省略号按钮点击会触发错误的翻页动作，调整如下：

{pagination.map((item, index) => {
  return (
    <li key={`page-${index}-${item}`}>
      <button
        onClick={() => typeof item === 'number' && onPageChange(item)}
        disabled={item === '...'}
      >
        {item}
      </button>
    </li>
  )
})}

手写练习提示 #

写这类交互逻辑前，先把所有规则拆成可量化的判断条件，不要靠模糊的感觉写分支：

• 先列清楚必须显示的数字页码范围（首尾、当前页相邻区间、边界特殊展示区间）
• 省略号不要提前硬编码位置，永远只根据相邻展示项的差值判断是否需要插入
• 所有涉及页码的计算都要做边界判断，避免出现0或者大于总页数的非法页码

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