react分頁(yè)顯示數(shù)據(jù)的方法介紹

本篇內(nèi)容介紹了“react分頁(yè)顯示數(shù)據(jù)的方法介紹”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

目錄

• 父組件listBox

• 列表組件List

• 按鈕組件PageButton

去年年底，嘗試著用react寫(xiě)個(gè)組件化的頁(yè)面!

里面有一個(gè)list頁(yè)面弄了一下數(shù)據(jù)的分頁(yè)展示

展示一下主要三個(gè)組件：父組件listBox、列表組件List、按鈕組件PageButton

父組件listBox

const listData = [{
    key:"001",
    idd:"001",
    title:"webstorm連接github，方便的管理倉(cāng)庫(kù)",
    time:"2016-12-01",
    tag:" git ",
    contents:"66666666666666！"
}] //等等等多條數(shù)據(jù)

class listBox extends Component {

    constructor(props){
        super(props);
        this.pageNext=this.pageNext.bind(this);
        this.setPage=this.setPage.bind(this);
        this.state = {
            indexList:[],//當(dāng)前渲染的頁(yè)面數(shù)據(jù)
            totalData:listData,
            current: 1, //當(dāng)前頁(yè)碼
            pageSize:4, //每頁(yè)顯示的條數(shù)
            goValue:0,  //要去的條數(shù)index
            totalPage:0,//總頁(yè)數(shù)
        };

    }

    componentWillMount(){
        //設(shè)置總頁(yè)數(shù)
        this.setState({
            totalPage:Math.ceil( this.state.totalData.length/this.state.pageSize),
        })
        this.pageNext(this.state.goValue)

    }

    //設(shè)置內(nèi)容
    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}`} >
                    <h4>{title}</h4>
                    <div className="icon">
                        <i className="fa fa-calendar"></i>
                        <span>發(fā)表于 {time} </span>
                        <i className="fa fa-sitemap"></i>
                        <span>分類(lèi)于 {tag}  </span>
                        <i className="fa fa-edit"></i>
                        <span>暫無(wú)評(píng)論</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
        }
    }

    //下一頁(yè)
    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)
            })
        }
    }

    //上一頁(yè)
    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 } >上一頁(yè)</span>
                <span>{ this.state.pagenum }頁(yè)/ { this.props.totalPage }頁(yè)</span>
                <span onClick={ this.setNext }>下一頁(yè)</span>
            </div>
        );
    }
}

“react分頁(yè)顯示數(shù)據(jù)的方法介紹”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！