ページにデータを表示するReactメソッド

const listData = [{
    キー:"001",
    id:"001",
    タイトル:「Webstorm は GitHub に接続して簡単に倉庫を管理できます」
    時間:"2016-12-01",
    タグ:" git ",
    内容:"666666666666666!"
}] // 複数のデータに対しても同様です。class listBox extends Component {

    コンストラクタ(props){
        スーパー(小道具);
        this.pageNext = this.pageNext.bind(this);
        this.setPage=this.setPage.bind(this);
        この状態 = {
            indexList:[], //現在レンダリングされているページデータ totalData:listData,
            current: 1, //現在のページ番号pageSize:4, //ページあたりに表示される項目数goValue:0, //インデックスへ移動する項目数
            totalPage:0, //ページ総数};

    }

    コンポーネントWillMount(){
        //ページの総数を設定する this.setState({
            totalPage:Math.ceil( this.state.totalData.length/this.state.pageSize),
        })
        this.pageNext(this.state.goValue)

    }

    //コンテンツを設定する setPage(num){
        this.setState({
            インデックスリスト:this.state.totalData.slice(num,num+this.state.pageSize)
        })
    }


    ページ次 (数値) {
        this.setPage(数値)
    }



    与える（） {

        戻る （
            <div className="メイン">
                <div className="トップバー">
                </div>
                <div className="リスト">
                    <ul className="インデックス">
                        {this.state.indexList.map(関数 (続き) {
                            <リスト {...cont} /> を返します。
                        })}
                    </ul>

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

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

クラスリストはComponentを拡張します{
    コンストラクタ(props) {
        スーパー(小道具);
    }

    与える（） {
        const { idd、タイトル、時間、タグ、内容 } = this.props

        戻る （
            <li id={idd}>
                <リンク先={`/list/listmore/${idd}`} >
                    <h3>{タイトル}</h3>
                    <div クラス名="アイコン">
                        <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>{コンテンツ}</p>
                    <span className="more">もっと見る</span>
                </リンク>
            </li>
        );
    }
}

クラスpageButtonはComponentを拡張します{

    コンストラクタ(props) {
        スーパー(小道具);
        this.setNext=this.setNext.bind(this);
        this.setUp = this.setUp.bind(this);
        this.state={
            番号: 0,
            ページ番号:this.props.current
        }
    }

    //次のページ setNext(){
        if(this.state.pagenum < this.props.totalPage){
            this.setState({
                num:this.state.num + this.props.pageSize、
                ページ番号:this.state.pagenum + 1
            }、関数 （） {
                コンソールログ(この状態)
                this.props.pageNext(this.state.num)
            })
        }
    }

    //前のページsetUp(){
        if(this.state.pagenum > 1){
            this.setState({
                num:this.state.num - this.props.pageSize、
                ページ番号:this.state.pagenum - 1
            }、関数 （） {
                コンソールログ(この状態)
                this.props.pageNext(this.state.num)
            })
        }
    }

    与える（） {
        戻る （
            <div className="ページ変更">
                <span onClick={ this.setUp } >前のページ</span>
                <span>{ this.state.pagenum } ページ / { this.props.totalPage } ページ </span>
                <span onClick={ this.setNext }>次のページ</span>
            </div>
        );
    }
}