简单的网页分页实现

写在前面：

首先，这个简单例子是由React开发的，但这并不能代表什么，我会在必要的地方加上说明，以便于只了解vue的朋友也能看懂原理或者写法，毕竟两个框架有许多共通的地方。（PS：我个人看好vue，react写起来程序结构较于vue非常混乱。。。）

首先上代码：

这是文章列表的组件，其中又渲染了一个PageNavigator的子组件。

import React from 'react';
import './article.css';
import axios from 'axios';
import PageNavigator from './pagenav';
class ArticleList extends React.Component {
    state = {
        listdata: [],
        pages: [],
        currentpage:1,
        start: 0
    }
    componentWillMount() {
        axios.get('http://localhost:3001/api/data.json').then((res) => {
            console.log(res);
            this.setState({
                listdata: res.data
            })
            let page=Math.ceil(res.data.length/5);//分出页码，ceil方法可以向上取整
            for(let i=1;i<=page;i++){
                this.state.pages.push(i)
            }
            console.log(page);
            this.forceUpdate();
        })

    }
    changeStatus = (e) => {
        // this.setState({
        //     current: true
        // })
    }
    getCurrentPage=(msg)=>{
        this.setState({
            currentpage:msg
        })
    }

    render() {
        return (
            <div className="content-block">
                <ul className="alist">//下面的this.state.currentpage和this.state.listdata.length可以用一个变量保存到data里
                    {this.state.listdata.slice((this.state.currentpage-1)*5, (this.state.listdata.length%5==0?((this.state.currentpage-1)*5)+5:((this.state.currentpage-1)+(this.state.listdata.length%5)))).map((items) =>
                        <li className="aitem">
                            <div className="aitem-content">
                                <p className="aitem-title">{items.object.data.title}</p>
                                <p className="aitem-article">