React自定义分页组件如何实现三点省略号渲染

核心实现逻辑 #

不要直接遍历全量页码数组渲染按钮，先根据总页数判断生成长度固定的渲染条目列表，列表项支持两种类型：页码数字、省略号占位符，渲染时按类型输出对应内容即可，不需要生成全量页码。
分支判断规则完全匹配需求：

• 当总页数maxPages < 5时，直接生成1到maxPages的全量页码数组，全量渲染按钮
• 当总页数maxPages >= 5时，固定返回[1,2,3,4, 'ellipsis', maxPages]的条目结构，对应1, 2, 3, 4, ..., 尾页的展示效果

修正后完整组件代码 #

原代码存在几处语法/逻辑问题已一并修复：

• 组件声明缺少等号，正确写法为export const Pagination = (props) => {}
• map遍历回调参数缺少括号，正确写法为.map((item, i) => {})
• 下一页按钮文本误写为prev，已修正为next

export const Pagination = (props) => {
  const { maxPages, pageNumber, onPageChange } = props

  // 生成待渲染的分页条目
  const getRenderItems = () => {
    // 总页数小于5时全量返回页码
    if (maxPages < 5) {
      return Array.from({ length: maxPages }, (_, idx) => idx + 1)
    }
    // 总页数大于等于5时，返回前4页+省略号+尾页
    return [1, 2, 3, 4, 'ellipsis', maxPages]
  }

  const renderItems = getRenderItems()

  return (
    <div>
      <button 
        disabled={pageNumber === 1} 
        onClick={() => onPageChange(pageNumber - 1)}
      >
        prev
      </button>

      {
        renderItems.map((item, idx) => {
          // 渲染不可点击的省略号
          if (item === 'ellipsis') {
            return <span key={`ellipsis-${idx}`} style={{ margin: '0 8px' }}>...</span>
          }
          // 渲染页码按钮，当前页加粗标识
          return (
            <button
              key={item}
              onClick={() => onPageChange(item)}
              style={{ fontWeight: item === pageNumber ? 'bold' : 'normal' }}
            >
              {item}
            </button>
          )
        })
      }

      <button 
        disabled={pageNumber === maxPages} 
        onClick={() => onPageChange(pageNumber + 1)}
      >
        next
      </button>
    </div>
  )
}

使用说明 #

• 省略号用无点击事件的span渲染，完全符合“省略号无需支持点击”的要求
• 组件接收onPageChange回调参数，触发时传入目标页码，可在父组件中接收该值更新pageNumber完成翻页逻辑
• 页码样式、省略号间距可以根据项目设计规范自行调整
• 如果后续需要扩展更复杂的省略号规则（比如当前页靠近尾部时省略号移到前部、当前页在中间时两侧显示省略号），只需要修改getRenderItems函数的生成逻辑即可，渲染层代码不需要改动。

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