react-bootstrap中Pagination组件循环渲染报错该如何解决？

错误原因 #

报错是因为你在JSX的{}中传入了未执行的匿名函数，React会把函数本身当成子元素渲染，不符合要求；同时for循环本身没有返回值，即使执行函数也无法拿到完整的页码组件列表。

正确实现方式 #

方案1：数组map渲染（React标准推荐写法）

直接生成指定长度的数组，通过map遍历返回页码组件：

<Pagination size="sm">
  <Pagination.First />
  <Pagination.Prev />
  {Array.from({ length: meta.last_page }, (_, idx) => idx + 1).map(page => (
    <Pagination.Item key={page} active={page === currentPage}>
      {page}
    </Pagination.Item>
  ))}
  <Pagination.Next />
  <Pagination.Last />
</Pagination>

注意必须给循环生成的组件加唯一key属性，active属性用来绑定当前选中的页码，替换为你自己存储当前页码的状态变量即可实现高亮效果。

方案2：提前用for循环构造组件数组

如果习惯用for循环，可以先在渲染逻辑外把页码组件存入数组，再直接传入JSX：

// 组件内部渲染逻辑前先构造页码数组
const pageItemList = []
for(let page = 1; page <= meta.last_page; page++){
  pageItemList.push(
    <Pagination.Item key={page} active={page === currentPage}>
      {page}
    </Pagination.Item>
  )
}

// 渲染时直接使用数组
<Pagination size="sm">
  <Pagination.First />
  <Pagination.Prev />
  {pageItemList}
  <Pagination.Next />
  <Pagination.Last />
</Pagination>

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