React分页效果，导航样式可控

这是一个用react加原生js写的分页效果，前面loading动画大家可自行添加。具体先看效果图

 接下来上代码:导航栏代码和scss代码。

import React, { Component } from 'react';

// 分页效果的导航部分

class Com extends React.Component {
    constructor(props) {
        super(props)
        let { defaultCurrent, total } = props;
        this.state = {
            currentPage: defaultCurrent, //当前页码
            groupCount: 5, //页码分组，显示7个页码，其余用省略号显示
            startPage: parseInt(defaultCurrent) - 2 > 0 ? parseInt(defaultCurrent) - 2 : parseInt(defaultCurrent), //分组开始页码
            totalPage: total //总页数
        }
    }
    componentDidMount() {
        const { defaultCurrent, } = this.props;
        const localCurrent = parseInt(sessionStorage.getItem('currentPage'));
        this.setState({
            currentPage: localCurrent || defaultCurrent,
            startPage: localCurrent - 2 > 0 ? localCurrent - 2 : localCurrent, //分组开始页码
        })

    }
    createPage() {
        const { currentPage, groupCount, startPage, totalPage } = this.state;
        let pages = [];
        //上一页
        pages.push(<li className={currentPage === 1 ? "nomore" : null} onClick={this.prePageHandeler.bind(this)} key={0}>上一页</li>)

        if (totalPage <= 10) {
            /*总页码小于等于10时，全部显示出来*/
            for (let i = 1; i <= totalPage; i++) {
                pages.push(<li key={i} onClick={this.pageClick.bind(this, i)} className={currentPage === i ? "activePage" : null}>{i}</li>)
            }
        } else {