react分页显示数据的方法

目录

• 父组件listBox
• 列表组件List
• 按钮组件PageButton

const listData = [{
    key:"001",
    idd:"001",
    title:"webstorm连接github，方便的管理仓库",
    time:"2016-12-01",
    tag:" git ",
    contents:"66666666666666！"
}] //等等等多条数据

class listBox extends Component {

    constructor(props){
        super(props);
        this.pageNext=this.pageNext.bind(this);
        this.setPage=this.setPage.bind(this);
        this.state = {
            indexList:[],//当前渲染的页面数据
            totalData:listData,
            current: 1, //当前页码
            pageSize:4, //每页显示的条数
            goValue:0,  //要去的条数index
            totalPage:0,//总页数
        };

    }

    componentWillMount(){
        //设置总页数
        this.setState({
            totalPage:Math.ceil( this.state.totalData.length/this.state.pageSize),
        })
        this.pageNext(this.state.goValue)

    }

    //设置内容
    setPage(num){
        this.setState({
            indexList:this.state.totalData.slice(num,num+this.state.pageSize)
        })
    }


    pageNext (num) {
        this.setPage(num)
    }



    render() {

        return (
            

                

                
                

                    

                        {this.state.indexList.map(function (cont) {
                            return 
                        })}
                    

                    

                
            
        );
    }
}

class list extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { idd,title,time,tag,contents } = this.props

        return (
            

                
                    
{title}
                    

                        
                        发表于 {time} 
                        
                        分类于 {tag}  
                        
                        暂无评论
                    
                    
{contents}
                    more
                
            
        );
    }
}

class pageButton extends Component {

    constructor(props) {
        super(props);
        this.setNext=this.setNext.bind(this);
        this.setUp=this.setUp.bind(this);
        this.state={
            num: 0,
            pagenum:this.props.current
        }
    }

    //下一页
    setNext(){
        if(this.state.pagenum  1){
            this.setState({
                num:this.state.num - this.props.pageSize,
                pagenum:this.state.pagenum - 1
            },function () {
                console.log(this.state)
                this.props.pageNext(this.state.num)
            })
        }
    }

    render() {
        return (
            

                上一页
                { this.state.pagenum }页/ { this.props.totalPage }页
                下一页
            
        );
    }
}