React-Bootstrap 分页组件

React-Bootstrap 是基于 Bootstrap 样式库的 React 组件库。它提供了大量的 UI 组件，包括网格系统、表单元素、标签页、导航、按钮、弹出框、模态框等等。其中，React-Bootstrap 分页组件是设计和开发基于 React.js 框架的分页控件，可以快速构建分页导航栏。

特点

• 直观易用的 API；
• 支持响应式布局；
• 可以自定义分页导航栏的样式。

安装

使用 npm 进行安装：

npm install react-bootstrap-pagination

引入

1. 导入样式：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-bootstrap-pagination/lib/react-bootstrap-pagination.css';

2. 导入组件：

import Pagination from 'react-bootstrap-pagination';

示例

import React, { useState } from 'react';
import Pagination from 'react-bootstrap-pagination";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-bootstrap-pagination/lib/react-bootstrap-pagination.css';

const App = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const handlePageChange = (page) => {
    setCurrentPage(page);
  };
  return (
    <>
      <p>当前页码：{currentPage}</p>
      <Pagination
        totalItems={100}
        pageSize={10}
        maxButtons={5}
        activePage={currentPage}
        onSelect={handlePageChange}
      />
    </>
  );
};

export default App;

API

分页导航栏

| 属性 | 类型 | 描述 | | ----------- | ---------------- | ------------------------------------------------------------------------------ | | totalItems | number | 必需。项总数。 | | pageSize | number | 必需。每页显示的条目数。 | | maxButtons | number | 可选。显示的最大按钮数。默认值为 5。 | | activePage | number | 可选。当前选中的页面。默认值为 1。 | | disabled | boolean | 可选。禁用分页。默认值为 false。 | | ellipsis | boolean | string | 可选。当页码数较多时，是否显示省略号。当为 true 时，显示默认省略号字符串“...”。当为字符串时，显示指定字符串。 | | boundaryLinks | boolean | 可选。是否显示第一页和最后一页的链接。默认为 false。 | | itemRender | | 可选。单个页码如何渲染的函数，将会传入当前页号和当前激活页号。 | | first | string | ReactNode | 可选。第一页的标题。 | | prev | string | ReactNode | 可选。前一页的标题。 | | next | string | ReactNode | 可选。下一页的标题。 | | last | string | ReactNode | 可选。最后一页的标题。 | | onSelect | function(number) | 必需。当用户选择页面时的回调函数。当 onSelect 函数接收到一个数字，它会传递给它。 |

itemRender 的类型

interface paginationRenderItem {
  (
    pageNumber: number,
    isActive: boolean,
  ): ReactNode;
}

例子

const renderItem = (pageNumber, isActive) => {
  return (
    <li className={isActive ? 'active' : null}>
      <a href={`#${pageNumber}`}>{pageNumber}</a>
    </li>
  );
};

<Pagination
  totalItems={100}
  pageSize={10}
  maxButtons={5}
  activePage={2}
  onSelect={handlePageChange}
  itemRender={renderItem}
/>

样式

这是类似上面 renderIndicator 函数的渲染方式，但是它的返回值是字符串。

<Pagination itemRender={(pageNumber, isActive, key) => (
  <li key={key} className='my-class'>
    <a href={`/page${pageNumber}`}>{pageNumber}</a>
  </li>
)} />

结语

React-Bootstrap 分页组件是一个非常棒的分页控件，它可以帮助我们快速构建分页导航栏。如果你正在寻找一个分页组件，它可能是你需要的。