• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

react分页显示数据的方法

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

去年年底,尝试着用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 (
            <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>
        );
    }
}

到此这篇关于react分页显示数据的方法的文章就介绍到这了,更多相关react分页显示内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vite引入虚拟文件的实现发布时间:2022-02-05
下一篇:
JavaScript 鼠标事件(MouseEvent)案例讲解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap