react-material-ui-pagination 是一个基于 React 和 Material UI 的分页组件库，可以方便地给前端页面添加分页功能。本文将介绍如何在项目中使用这个 npm 包，带有详细的代码示例和深入讲解。
安装
使用 npm 安装 react-material-ui-pagination：
npm install react-material-ui-pagination
基本使用
下面是一个使用 react-material-ui-pagination 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ --
--
-
---------------- - ------ -- -
--------------- ------------ ---- ---
--
-------- -
------ -
-----
-------------
-------
-------
----
-----------
-----------
-----
--------
-------
----
--------------
-----------
-----
--- ------ ---
--------
--------
-----------
----------
--------------------------------
------------
--------------------------------
--
------
--
-
-上面的示例中，Pagination 组件放在了表格下面，用来进行分页。组件的 props 如下：
total：总数据量，必填。current：当前页码，必填。display：最多显示的页码个数，默认为 5。onChange：页码改变时的回调函数，接受一个参数page，表示页码号，必填。
这样，就完成了基本的分页功能。
深入讲解
受控组件
在示例代码中，我们将组件的当前页码保存到了 state 中：this.state.currentPage。这种做法称为“受控组件”，即组件的 props 取决于外部传入的 state，父组件可以完全控制子组件的状态。
受控组件的好处在于，可以更好地控制组件的行为，例如在上一页和下一页的按钮中，可以根据 this.state.currentPage 来决定这些按钮是否禁用。
CSS 样式
react-material-ui-pagination 默认使用了 Material UI 的 CSS 样式，如果你已经引入 Material UI 的样式库，那么它的样式也会自动被应用。如果你想要定制样式，可以使用 className 和 style 进行样式覆盖：
<Pagination
total={50}
current={this.state.currentPage}
display={10}
onChange={this.handleChangePage}
className="my-pagination"
style={{ marginTop: "20px" }}
/>属性缩写
Pagination 组件中，total、current、display、onChange 是常用属性，因此提供了缩写：
<Pagination total={50} current={this.state.currentPage} onPage={this.handleChangePage} />这样，onPage 就代表了 onChange，display 的默认值也变成了 5。
定制页码展示内容
Pagination 组件默认展示的页码是简单的文本，但是有时候我们可能需要定制页码的展示内容。这时，可以使用 renderItem 属性。renderItem 是一个函数，接受一个参数 item，表示页码号。函数的返回值就是要展示的内容。
-- -------------------- ---- -------
-----------
----------
--------------------------------
--------------------------------
------------------ -- -
------- ------------------ --------------- -------------
------
---------
--
--上面的示例中，我们将页码号包裹在了一个 Material UI 的 Button 组件中。
结语
react-material-ui-pagination 是一个方便好用的分页组件库，通过本文的介绍，相信读者已经了解了如何在项目中使用它。此外，我们还深入讲解了受控组件、CSS 样式、属性缩写和定制页码展示内容等技术点。我相信这些知识对于你学习 React 和前端开发都有着一定的指导意义，希望本文能够对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551f481e8991b448cf766