React简单的分页代码实现（子组件向父组件传值）

前言

分页其实很容易实现，我自己写了一个简单的分页组件，可以实现上下翻页，输入页码跳转到指定页，刷新页面后不会回到第一页（hash值记录当前页码）。效果如下：

功能分析

把这个组件拆开看，其实就是三个功能：

1. 翻页（基本功能）
2. 跳转到指定页
3. 记录页码（利用hash）

父组件向分页组件需要传递两个值：数据总数，一页显示几条数据。

<Pagination
         total={this.state.total}
         pageSize = {this.pageSize}
 />

翻页功能实现

分页组件：

    constructor(props) {
        super(props);
        this.state = {
            currentPageNum: props.currentPageNum, //当前页码
        }
    }
    render() {
        let pageTotal = Math.ceil(this.props.total / this.props.pageSize); //页码总数
        return (
            <section>
                <a href="javascript:void(0)">上一页  </a>
                <div>
                    <input type="text" value={this.state.currentPageNum} />
                    <span>/{pageTotal}</span>
                </div>
                <a href="javascript:void(0)">下一页 </a>
            </section>
        )
    }
}

当前页码currentPageNum是从父组件传递过来的值，一般情况下不需要传这个值，我之前是从父组件更改它，后来修改了代码，就在组件里更新它，不过父组件也可以传当前页码过来。
到这里就完成了基本的分页组件展示了，接下来开始实现上一页和下一页功能。
给上一页和下一页绑定事件：

<a href="javascript:void(0)" onClick={
  () => this.goToPage(this.state.currentPageNum-1)}>上一页  </a>
<a href="javascript:void(0)" onClick={
  () => this.goToPage(this.state.currentPageNum+1)}>下一页  </a>

goToPage()方法：

//翻页
    goToPage(num) {
        this.setState({currentPageNum: num});
        this.props.goToPage(num); 
    }

这里this.props.goToPage()是子组件调用父组件传过来的方法。点击翻页的时候，子组件也需要向父组件传参，并调用该方法，通过回调函数就实现了子组件向父组件传值。
父组件要传递这个函数：

<Pagination
       total={
  this.state.total}
       pageSize = {
  this.pageSize}
       currentPageNum = {
  this.state.currentPageNum}
       goToPage = {
  (pageNum) => this.goToPage(pageNum)}
 />

这里父组件就可以获取到翻页子组件传过来的页码，然后根据这个页码发起网络请求，这里怎么写和后台有关，比如我们的后台是有分页的，我要请求第几页，请求多少条数据传递给后台就可以，可能有的后台是返回了全部数据，然后前端去处理分页