React JS开发中如何限制分页页码的显示数量？

1. 修正基础变量定义 #

给状态加默认值，把URL获取的页码转成数字，避免类型不匹配导致逻辑异常：

const params = useParams();
// 转数字，默认第一页，避免无参数时报错
const currentPage = Number(params.page) || 1;
// 给总页数加初始值1，避免初始渲染循环逻辑异常
const [pageNumber, setPageNumber] = useState(1);
const [articleData, setArticleData] = useState([]);

2. 替换页码生成逻辑 #

核心逻辑是设定最大连续显示页码数，总页数超过阈值时插入省略号，保留首尾可见页码，完全匹配你需要的1 2 3 ... 9效果：

const pagesArray = [];
// 可自定义：前面最多显示的连续页码数量
const MAX_VISIBLE_PAGES = 3;

// 总页数较少时直接全量渲染
if (pageNumber <= MAX_VISIBLE_PAGES + 1) {
  for (let i = 1; i <= pageNumber; i++) {
    pagesArray.push(
      <Link 
        key={i} 
        to={`/articles/${i}`}
        // 可选：加当前页高亮类，自行编写对应CSS样式即可
        className={i === currentPage ? 'page-active' : ''}
      >
        {i}
      </Link>
    );
  }
} else {
  // 渲染前面的连续页码
  for (let i = 1; i <= MAX_VISIBLE_PAGES; i++) {
    pagesArray.push(
      <Link 
        key={i} 
        to={`/articles/${i}`}
        className={i === currentPage ? 'page-active' : ''}
      >
        {i}
      </Link>
    );
  }
  // 插入省略号
  pagesArray.push(<span key="ellipsis">...</span>);
  // 渲染最后一页
  pagesArray.push(
    <Link 
      key={pageNumber} 
      to={`/articles/${pageNumber}`}
      className={pageNumber === currentPage ? 'page-active' : ''}
    >
      {pageNumber}
    </Link>
  );
}

3. 可选扩展：支持当前页附近页码显示 #

如果需要实现当前页在中间时，显示前后相邻的页码（比如总页数9，当前页为5时显示1 ... 4 5 6 ... 9），可以用下面的逻辑：

const pagesArray = [];
const MAX_SIBLING_PAGES = 1; // 当前页前后显示的相邻页数，可调整
const showLeftEllipsis = currentPage > MAX_SIBLING_PAGES + 2;
const showRightEllipsis = currentPage < pageNumber - (MAX_SIBLING_PAGES + 1);

// 始终显示第一页
pagesArray.push(
  <Link key={1} to={`/articles/${1}`} className={1 === currentPage ? 'page-active' : ''}>
    1
  </Link>
);

// 左侧省略号
if (showLeftEllipsis) {
  pagesArray.push(<span key="left-ellipsis">...</span>);
}

// 计算要显示的中间页码范围
const startPage = showLeftEllipsis ? currentPage - MAX_SIBLING_PAGES : 2;
const endPage = showRightEllipsis ? currentPage + MAX_SIBLING_PAGES : pageNumber - 1;

for (let i = startPage; i <= endPage; i++) {
  pagesArray.push(
    <Link key={i} to={`/articles/${i}`} className={i === currentPage ? 'page-active' : ''}>
      {i}
    </Link>
  );
}

// 右侧省略号
if (showRightEllipsis) {
  pagesArray.push(<span key="right-ellipsis">...</span>);
}

// 始终显示最后一页
if (pageNumber > 1) {
  pagesArray.push(
    <Link key={pageNumber} to={`/articles/${pageNumber}`} className={pageNumber === currentPage ? 'page-active' : ''}>
      {pageNumber}
    </Link>
  );
}

注意事项 #

• 给所有循环生成的JSX元素加唯一key，避免React渲染警告
• 可以自行调整MAX_VISIBLE_PAGES、MAX_SIBLING_PAGES参数适配你的页面宽度需求

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