目錄

• 父元件listBox
• 列表元件List
• 按鈕元件PageButton

去年年底，嘗試著用react寫個元件化的頁面!

裡面有一個list頁面弄了一下資料的分頁展示

展示一下主要三個元件：父元件listBox、列表元件List、按鈕元件PageButton

父元件listBox

const listData = [{
    key:"001",idd:"001",title:"webstorm連線，方便的管理倉庫",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} />
  www.cppcns.com
 
                      })}
                    </ul>

                    <PageButton { ..www.cppcns.com.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 classN客棧
 
ame="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)
            })
OTupBmS        }
    }

    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分頁顯示內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！