React翻页组件

目前正在做React开发工作，也是第一次接触这个语言，以前接触过Vue,React写起来其实跟Vue差不多的，写些基本的功能还是可以的。在本次项目开发中，设计师设计了一个查询结果页面以弹窗的样式展现，当结果条数过多的时候以分页展示，这里设计师设计的是采用页码翻页的，不是传统的移动端直接往上拉加载更多。页码翻页我认为大部分会用在PC端，那么既然设计图出来了，也是要实现的嘛。本着快捷开发的原则，我第一时间去React组件库antd查找，希望找个差不多的可以直接用或者改造一下拿来用，找是找到了，就是用的时候，这个翻页组件在页码过多的时候，前后有省略号状态时，组件宽度会突然扩张一下，这对于移动端开发是很不友好的，它随便扩一下，我这里就直接超出视图范围了，直接造成bug，我尝试去改变css样式以便控制组件宽度，最好是固定宽度不动，但调了一段时间，发现没能成功，毕竟是新手，我直接抛弃这个小辣鸡，本人打算自己写一个翻页组件用用了。我要开始我的表演了，先大概说下我设计的这个组件，两端各有翻页箭头，点击分别可实现向前向后翻一页功能，页码数不大于8的时候，1-8页居中全展示，供用户点击切换页面；当总页数多余8的时候，完成初始化后，默认选中第一页,然后在倒数第二个小方块显示省略号，最后一个方块显示最后一页的页码，当用户点击省略号的时候，控件会向后翻4页，此时第二个小方块也会变成省略号以代表已经翻过的不能显示完全的页码，前后两个省略号点击分别可实现向前向后翻4页的功能，至此总算是实现了我自己的需求，也符合设计师设计的样式。可以来看下效果图：

总页数为8

翻页功能展示

组件在用的时候只需要传入总页码数和选中页码回调方法就可以了，这个组件我个人觉得在PC端也是可以用的，样式什么的，如果你要用的话也是可以随便改，而且改起来也很容易。话不多说了，是时候给出代码链接了，如果有bug，请联系我，希望这个组件能帮到你。PageComponent