创建React分页组件

初次使用React，开发过程中必不可少的要使用分页组件，刚开始准备找一个现成的代码，找了一圈发现要么太烂要么就是需要引入框架，不想将就又不想引入新的框架就只好自己造轮子了。

1. 创建一个分页组件

import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';
import React from 'react';
import classNames from "classnames";
import styles from "../pageable/pageable-ui.css";

class PageableUi extends React.Component {

    constructor (props) {
        super(props);
        bindAll(this, [
            'createElement',
            'animation'
        ]);
        this.state = {
            temp: this,
            buttonClick: 0
        };
    }
    componentDidMount () {

    }
    componentDidUpdate (prevProps, prevState) {

    }

    render () {
        const elementList=this.createElement();
        return (
            <div>
                <div className={classNames(styles.pageBox)}>
                    <button onClick={()=>{this.animation(1);this.props.page(1)}} className={classNames(this.state.buttonClick===1?styles.buttonSpecial:styles.buttonRoutine)}>首页</button>
                    <button disabled={this.props.current <= 1} onClick={()=>{this.animation(2);this.props.page(this.props.current-1)}} className={classNames(this.state.buttonClick===2?styles.buttonSpecial:styles.buttonRoutine)}>上一页</button>
                    <div>
                    {elementList}
                    </div>
                    <button disabled={this.props.current >= this.props.pageTotal} onClick={()=>{this.animation(3);this.props.page(this.props.current+1)}} className={classNames(this.state.buttonClick===3?styles.buttonSpecial:styles.buttonRoutine)}>下一页</button>
                    <button onClick={()=>{this.animation(4);this.props.page(this.props.pageTotal)}} className={classNames(this.state.buttonClick===4?styles.buttonSpecial:styles.buttonRoutine)}>末页</button>
                </div>
            </div>
        );
    }


    animation(num){
        this.setState({
            buttonClick: num
        },()=>{})
        setTimeout(() => {
            this.setState({
                buttonClick: 0
            })
        },100);
    }

    createElement(){
        let elements = [];
        let index = [];
        let count = 1;
        let temp = [];
        this.props.pageButtonCount
        index.push(this.props.current)
        // 在当前页面的左右各添加 pageButtonCount 个元素，也可能添加不够
        for (var a = 1;a<=this.props.pageButtonCount;a++){
            if (this.props.current-a>0){
                index.push(this.props.current-a)
            }
            if (this.props.current+a<=this.props.pageTotal){
                index.push(this.props.current+a)
            }
        }
        index = index.sort((a1,a2)=>a1-a2)
        let cIndex=index.indexOf(this.props.current);
        temp.push(this.props.current)
        do {
            if (cIndex-count>=0){
                temp.push(index[cIndex-count])
            }
            if (cIndex+count<index.length){
                temp.push(index[cIndex+count])
            }
            count = count+1;
            if (this.props.pageButtonCount>=this.props.pageTotal && temp.length>=this.props.pageTotal){
                break
            }
        }while (temp.length<this.props.pageButtonCount)
        index = temp;
        index = index.sort((a1,a2)=>a1-a2)
        index = index.slice(0,this.props.pageButtonCount)
        index.forEach((i)=>{
            if (i===this.props.current) {
                elements.push(<button onClick={()=>{this.props.page(i)}} className={classNames(styles.currentPage)}>{i}</button>)
            } else {
                elements.push(<button onClick={()=>{this.props.page(i)}} className={classNames(styles.pageItem)}>{i}</button>)
            }
        })
        return elements;
    }
}

PageableUi.propTypes = {
    current: PropTypes.number,
    pageTotal: PropTypes.number,
    pageButtonCount: PropTypes.number,
    page: PropTypes.func
};

PageableUi.defaultProps = {
    current: 2,
    pageTotal: 9,
    pageButtonCount: 9,
};

export default PageableUi;

2.组件的样式文件

@import "../../css/units.css";
@import "../../css/colors.css";

.pageBox{
    display: flex;
}


.buttonRoutine{
    width: 50px;
    background-color: white;
    color: black;
    border-color: #4d97ff;
    font-size: x-small;
    margin-left: 2px;
    border-radius: 2px;
}

.buttonSpecial{
    width: 50px;
    background-color: white;
    color: #ff0025;
    border-color: #ff0025;
    font-size: x-small;
    margin-left: 2px;
    border-radius: 2px;
}

.currentPage{
    background-color: #4d97ff;
    width: 40px;
    color: black;
    margin-left: 2px;
    border-width: 1px;
    margin-right: 2px;
    border-color: #4d97ff;
    border-radius: 2px;
    font-size: x-small;
}

.pageItem{
    background-color: white;
    width: 40px;
    color: black;
    margin-left: 2px;
    border-width: 1px;
    margin-right: 2px;
    border-color: #4d97ff;
    border-radius: 2px;
    font-size: x-small;
}

3. 父组件应用分页组件

    fetch(skipPage){
        this.setState({page: Object.assign(this.state.page,{current: skipPage})})
    }

   <div className={classNames(styles.pageBox)}>
         <PageableUi pageButtonCount={5} current={this.state.page.current} page={(num)=>{this.fetch(num)}}></PageableUi>
   </div>