一步一步教你写 React 分页组件（二）

• 此分页组件已发布至NPM，欢迎下载并提意见

上一篇文章实现了一个静态版本的分页组件，没有任何交互。在本篇文章中，我们将一步一步实现动态页码和交互效果。

将页码放在 Props 中

在实际的项目中，总页数都是动态变化的，需要从后端获取，因此我们将总页数放到 Props 中，以动态生成页码。
定义一个名为 config 的 Props，该 Props 是一个对象，在该对象中放入分页相关的变量。
调用该分页组件：

import React,{ Component } from "react";
import Pagination from "../Pagination";

export default class App extends Component{
    render(){
        return(
            <article>
                <Pagination config = {{
                    totalPage:10,
                }}></Pagination>
            </article>
        );
    }
}

通过 Props 动态生成页码：

import React,{ Component } from "react";
import style from "./pagination.scss";
export default class Pagination extends Component{
    constructor(props){
        super(props)
    }

    create(){
        const {
            totalPage,
        } = this.props.config;

        let pages = [];
        pages.push(<li key={0}>上一页</li>)
        for(let i = 1;i <= totalPage; i++){
            pages.push(<li key={i}>{i}</li>)
        }
        pages.push(<li key={totalPage + 1}>下一页</li>)

        return pages;
    }

    render(){
        const Pages = this.create.bind(this)();
        return(
            <div className = { style.main }>
                <ul className = { style.page }>
                    { Pages }
                </ul>
            </div>
        );
    }
}

上面的 create 方法用来动态生成分页，该方法返回一个 JSX 列表。
使用 Props 动态生成页码的效果如图：

动态生成页码.png

使页码可点击

现在我们来实现点击页码，给当前的 li 元素添加样式。思路：

• state 中放一个属性，表示当前页面
• 每次点击页码时，更新该 state
• 若页码数字和该 state 相等，即应用 active 样式

下面是实现代码：

import React,{ Component } from "react";
import style from "./pagination.scss";
export default class Pagination extends Component{
    constructor(props){
        super(props)
        // 设置当前页码，默认为第一页
        this.state = {
            pageCurr:1,
        }
    }

    create(){
        const {
            totalPage,
        } = this.props.config;

        const {
            pageCurr,
        } = this.state;

        let pages = [];
        pages.push(<li key={0}>上一页</li>)
        for(let i = 1;i <= totalPage; i++){
            // 点击页码时调用 go 方法，根据 state 判断是否应用 active 样式
            pages.push(<li onClick = { this.go.bind(this,i) } className = { pageCurr === i ? style.active : "" } key={i}>{i}</li>)
        }
        pages.push(<li key={totalPage + 1}>下一页</li>)

        return pages;
    }
    
    // 更新 state
    go(pageCurr){
        this.setState({
            pageCurr
        })
    }

    render(){
        const Pages = this.create.bind(this)();
        return(
            <div className = { style.main }>
                <ul className = { style.page }>
                    { Pages }
                </ul>
            </div>
        );
    }
}

实现效果如图：

根据state响应点击.gif

go 方法是该组件的核心方法，用来更新 state，响应操作。

响应上一页和下一页操作

在进行上一页和下一页操作时，核心原理依然不变：通过改变 state，动态应用样式。我们再定义两个方法：

• goPrev 控制页面向前
• goNext 控制页面向后

进一步完善代码：

create(){
...
    let pages = [];
    pages.push(<li onClick = { this.goPrev.bind(this) } key={0}>上一页</li>)
...
    pages.push(<li onClick = { this.goNext.bind(this) } key={totalPage + 1}>下一页</li>)
    return pages;
}

...
// 页面向前
goPrev(){
    let {
        pageCurr,
    } = this.state;

    this.go( --pageCurr )
}
// 页面向后
goNext(){
    let {
        pageCurr,
    } = this.state;

    this.go( ++pageCurr )
}
...

这步完成后，我们的分页组件已经初具雏形了，下面是实现效果：

上下页切换.gif

至此，我们已经由静态组件逐步过渡到了可动态生成页码、能对用户操作进行响应的动态组件。本文到这里也就结束了，后面的文章中，将在此基上实现更多的功能。敬请期待：）

完。

一步一步教你写 React 分页组件（一）
一步一步教你写 React 分页组件（二）
一步一步教你写 React 分页组件（三）
一步一步教你写 React 分页组件（四）
一步一步教你写 React 分页组件（五）
一步一步教你写 React 分页组件（六）