专栏首页一个会写诗的程序员的博客用 React 分页显示数据用react分页显示数据

用 React 分页显示数据用react分页显示数据

用react分页显示数据

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

demo地址

里面有一个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 (
            <div className="main">
                <div className="top_bar">
                </div>
                <div className="lists">
                    <ul className="index">
                        {this.state.indexList.map(function (cont) {
                            return <List {...cont} />
                        })}
                    </ul>

                    <PageButton { ...this.state } pageNext={this.pageNext} />

                </div>
            </div>
        );
    }
}

列表组件List

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

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

        return (
            <li id={idd}>
                <Link to={`/list/listmore/${idd}`} >
                    <h3>{title}</h3>
                    <div className="icon">
                        <i className="fa fa-calendar"></i>
                        <span>发表于 {time} </span>
                        <i className="fa fa-sitemap"></i>
                        <span>分类于 {tag}  </span>
                        <i className="fa fa-edit"></i>
                        <span>暂无评论</span>
                    </div>
                    <p>{contents}</p>
                    <span className="more">more</span>
                </Link>
            </li>
        );
    }
}

按钮组件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 (
            <div className="change_page">
                <span onClick={ this.setUp } >上一页</span>
                <span>{ this.state.pagenum }页/ { this.props.totalPage }页</span>
                <span onClick={ this.setNext }>下一页</span>
            </div>
        );
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一段探索React自建内部构造的旅程

    在先前的文章里我们涵盖了React基本原理和如何构建更加复杂的交互组件。此篇文章我们将会继续探索React组件的特性,特别是生命周期。

    一个会写诗的程序员
  • 回调函数的后面加个bind(this)的作用是什么回调函数的后面加个bind(this)的作用是什么

    一个会写诗的程序员
  • bootstrap-datetimepicker 配置全面指南 ( version : 4.17.47 )bootstrap-datetimepicker

    https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstra...

    一个会写诗的程序员
  • React人机验证控件

    在使用React做前端,用户注册页面因为要短信验证,短信服务商要求加人机验证,于是我找到了 react-captcha-generator。

    fanzhh
  • 使用组件的state机制实现屏幕取词

    望月从良
  • React源码分析与实现(一):组件的初始化与渲染

    阅读源码的方式有很多种,广度优先法、调用栈调试法等等,此系列文章,采用基线法,顾名思义,就是以低版本为基线,逐渐了解源码的演进过程和思路。

    Nealyang
  • Canvas游动的花花肠子

    我不是费圆
  • Angular6自定义表单控件方式集成Editormd

    曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但...

    汐楓
  • Flash在线拍摄用户头象

    很多网站在上传用户头象时,除了传统方式上传外,都支持在线摄像头拍照并做简单编辑,完成之后再将图象数据提交到服务端(比如ASP.Net),这几天正好需要这个功能,...

    菩提树下的杨过
  • 上拉加载下拉刷新了解下

    1.界面上,只分成简单的两块,一块是上方的刷新文字,一块是下方的内容,然后将上方提示内容隐藏在屏幕之外,一般由两种方式,一种是上面遮一层,另一种是marginT...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券