去年年底，尝试着用react写个组件化的页面!

里面有一个list页面弄了一下数据的分页展示

展示一下主要三个组件：父组件listBox、列表组件List、按钮组件PageButton

父组件listBox

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 
                                })}                    
       
                    
                       
      
            
     
        );    }}

列表组件List

class list extends Component {    constructor(props) {        super(props);    }    render() {        const { idd,title,time,tag,contents } = this.props        return (            
                
                          
{title}
                    
      
                        
                               
       发表于 {time}                         
                               
       分类于 {tag}                          
                               
       暂无评论                    
      
                    
{contents}
                    more                            
        );    }}

按钮组件PageButton

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 < this.props.totalPage){            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)            })        }    }    //上一页    setUp(){        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 }页                
      下一页            
     
        );    }}