react分页显示数据的方法.docx

第

react分页显示数据的方法

目录父组件listBox列表组件List按钮组件PageButton去年年底，尝试着用react写个组件化的页面!

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

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

父组件listBox

constlistData=[{

key:001,

idd:001,

title:webstorm连接github，方便的管理仓库,

time:2016-12-01,

tag:git,

contents:66666666666666！

}]//等等等多条数据

classlistBoxextendsComponent{

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)