如何使用react的分页控件

#1

网上找了很多分页控件的原理,但是他们都是讲的如何实现一个分页控件,如果有一个现成的控件,比如ant design里面的,他的文档给的是这样

就这么一个光秃秃的控件
还有API:
参数 说明 类型 默认值
current 当前页数 Number 无
defaultCurrent 默认的当前页数 Number 1
total 数据总数 Number 0
defaultPageSize 初始的每页条数 Number 10
pageSize 每页条数 Number
onChange 页码改变的回调,参数是改变后的页码 Function noop
showSizeChanger 是否可以改变 pageSize Bool false
pageSizeOptions 指定每页可以显示多少条 Array [‘10’, ‘20’, ‘30’, ‘40’]
onShowSizeChange pageSize 变化的回调 Function noop
showQuickJumper 是否可以快速跳转至某页 Bool false
size 当为「small」时,是小尺寸分页 String “”
simple 当添加该属性时,显示为简单分页 Object 无
showTotal 用于显示总共有多少条数据 Function 无

这里面我看不到数据从哪里传送耶……

具体的问题是:
我想写一个有分页控件的页面,页面顶上的搜索框输入搜索内容后,把搜索框的字段发给后端,后端返回一堆数据,然后这个页面接受到数据后,依次遍历生成带有我自己定好样式的一个个小块,就像淘宝这样:

就是拿后端发来的名字+数据,生成这样带样式的数据展示,
然后还想用分页控件,控制一页只有16个这样的小块,请问在这里是要把我带样式的数据再传给分页控件嘛?
还是说最初后端发来的数据直接传给分页控件,但是样式又在哪里生成呢?

希望有人来帮帮忙 :cry:

#2

ant design 只是做的控件,你给什么样子的数据就是现实什么结果。 分页逻辑要自己去处理,你看看react-router、redux。前后端的数据交互都是通过API来完成的。

1 Like