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

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

分页在网页中几乎是必不可少的工具，正好最近公司的项目尝试使用 react 开发，里面需要用到分页组件，项目时间倒也不太紧，就想自己造一个简易的轮子，并应用到了项目中。我将在这篇文章中分享我的一些思路，一步一步带大家写 react 版的分页。希望大家多提意见，共同交流。

预备知识

本文需要你了解以下知识：

• React
• ES6
• CSS Modules
• SCSS
• Fetch（不重要）

题外话：关于 CSS Modules 和 SCSS 将不在这里进行介绍，对这部分内容还不清楚的同学可以先了解了解这两块知识再来看本系列文章。当然代码都是比较简单的，就算不了解也能比较轻松的看懂：）

脉络

我会先带大家写一个最简易的分页（包括最基本的 HTML 和 CSS），然后再逐步增加功能。

最终效果

分页组件的最终效果像这样：

final.gif

搭架子

整个组件分为两部分：

• 左边选择每页显示的下拉条
• 右边的页码区域

由于原始的 <select> 标签不方便自定义样式，不好进行后期的修改，因此我们会自己实现一个（这部分我们放在后面说）。先来实现右边的页码部分，最原始的架子应该是这样：

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

    render(){
        return(
            <div>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
            </div>
        );
    }
}

这是页面效果：

初始效果.png

美化样式

新建一个 pagination.scss，并在组件中引入

import React,{ Component } from "react";
import style from "./pagination.scss";
...

定义样式规则，这里我们采用 flex 布局：

.main{
    display: flex;
    width:100%;
    justify-content:space-around;
    align-items:flex-start;
}

.page{
    list-style: none;
    padding:0;
    margin:0;
    li{
        float:left;
        width:30px;
        height:30px;
        border:1px solid #e6e6e6;
        text-align: center;
        line-height: 30px;
        color:#333;
        cursor:pointer;

        &:first-of-type,&:last-of-type{
            width:auto;
            padding:0 5px;
        }

        &:first-of-type{
            margin-right:10px;
        }

        &:last-of-type{
            margin-left:10px;
        }

        &::selection {
            background-color: transparent;
        }
    }
}

.active{
    color:#fff !important;
    background: #54b0bd;
    border-color:#54b0bd !important;
}

在组件中应用 CSS Modules 中的样式，并增加“上一页”和“下一页”按钮：

...
render(){
    return(
        <div className = { style.main }>
            <ul className = { style.page }>
                <li>上一页</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li className = { style.active }>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>下一页</li>
            </ul>
        </div>
    );
}
...

基本的样式已经出来了，看看效果：

基本效果.png

至此，页码部分的静态效果已经出来了，这部分内容还比较简单，只是纯静态效果，没有任何交互。本篇博文到此也就结束了，下一篇文章中我们将让组件“动”起来，能响应用户的点击操作。

完。

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