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

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

去年年底，尝试着用react写个组件化的页面!
里面有一个list页面弄了一下数据的分页展示
展示一下主要三个组件：父组件listBox、列表组件List、按钮组件PageButton

父组件listBox

const listData = https://www.it610.com/article/[{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,//要去的条数indextotalPage: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.propsreturn (
{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 }页下一页); }}