react一个很好用的分页插件
2018-10-12 本文已影响0人
十九楼的清风
在github上面看到的一个给react使用的很好的分页插件,下面是使用详细方法
首先到github上搜索react pagination
![](https://img.haomeiwen.com/i13055508/818d09e7922067a0.png)
点开进去之后,可以观看使用方法。
然后我们开始在项目中安装。
执行yarn add rc-pagination@1.15.1
![](https://img.haomeiwen.com/i13055508/e8affd96c232d342.png)
![](https://img.haomeiwen.com/i13055508/035e5e0d8e272a2d.png)
先导入组件和样式
![](https://img.haomeiwen.com/i13055508/41770c190a7d1364.png)
在项目中渲染组件
![](https://img.haomeiwen.com/i13055508/d406812ef30a8c84.png)
基本使用
![](https://img.haomeiwen.com/i13055508/fa702aa8a72aa713.png)
因为样式等都很乱,所以我们来封装个util分页组件
在util工具库下新建文件夹pagination,创建通用分页组件
![](https://img.haomeiwen.com/i13055508/7440a3c495f23491.png)
编写通用分页组件代码
![](https://img.haomeiwen.com/i13055508/b3652bcfedac4126.png)
引入通用分页组建
![](https://img.haomeiwen.com/i13055508/f44bfd43ccb21fbc.png)
开始在项目中使用
![](https://img.haomeiwen.com/i13055508/ea210f35237c0d1d.png)
以上是分页插件的基本使用,下面将后台请求的数据动态加载到分页组建上。
找到后台提供的接口文档
![](https://img.haomeiwen.com/i13055508/35a9e7728074561e.png)
开始写请求数据代码
![](https://img.haomeiwen.com/i13055508/2a3e2272b6cc44bd.png)
![](https://img.haomeiwen.com/i13055508/01217fb521d5bb09.png)
找到user-server.jsx,在里面编写请求分页方法
![](https://img.haomeiwen.com/i13055508/663510496cbffd45.png)
页面代码
![](https://img.haomeiwen.com/i13055508/5b1d4b059f7846ae.png)
![](https://img.haomeiwen.com/i13055508/720b23ecf825bf2e.png)
![](https://img.haomeiwen.com/i13055508/99e8efc9b06e5b64.png)