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

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

昨年末に、Reactを使ってコンポーネント化されたページを書いてみました!

ページごとにデータを表示するリストページがあります

3つの主要コンポーネントを表示します: 親コンポーネント listBox、リストコンポーネント List、ボタンコンポーネント PageButton

親コンポーネントリストボックス

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

クラス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>
        );
    }
} 

これで、React でページング モードでデータを表示する方法についての記事は終了です。React でのページング モードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Reactはページング効果を実装する
  • 自分でReactを使ってページングコンポーネントを書いてみる(まとめ)
  • Reactjsはユニバーサルページングコンポーネントのサンプルコードを実装します

<<:  Win10システムにMySQL 8.0をインストールするときに発生する問題を解決する

>>:  Nginxでネットワーク分離を解決した実践記録を詳しく解説

推薦する

MySQL 学習チュートリアル クラスター化インデックス

クラスタリングは、実際には InnoDB データベース エンジンに関連しています。したがって、インデ...

CSS グリッドレイアウトで列にアイテムを埋め込む方法

n 個のアイテムがあり、これらのアイテムをグリッド レイアウトの列に並べ替える必要があるとします。列...

Linux の RPM パッケージでインストールされた xinetd ベースのサービスの管理

目次序文1. xinetdサービスに基づく起動管理(1)Telnetサービスのインストール(2)Te...

Windows での Apache+Tomcat7 負荷分散構成方法の詳細な説明

準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...

Linux の検索ツールの代替となるフレンドリーなツール

find コマンドは、指定されたディレクトリ内のファイルを検索するために使用されます。引数の前の文字...

Docker ケース分析: MySQL データベース サービスの構築

目次1 設定ディレクトリとデータディレクトリを作成する3 イメージからホストに構成ファイルをコピーす...

JS ループで async と await を正しく使用する方法

目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...

Vmware + Ubuntu18.04 に Hbase 2.3.5 をインストールするための詳細なチュートリアル

序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...

ZFS とは何か? ZFS を使用する理由とその機能

ZFSの歴史Z ファイル システム (ZFS) は、2001 年に Matthew Ahrens と...

React の調整アルゴリズム Diffing アルゴリズム戦略の詳細な説明

目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...

MySQL での order by の使用に関する詳細

目次1. はじめに2. 本文2.1 単一列のソート2.2 複数の列を並べ替える2.3 ソート方法2....

Centos7 に Nginx 統合 Lua サンプル コードをインストール

序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...

React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...

APPログインインターフェースシミュレーション要求を実装するためのPostmanデータ暗号化と復号化

目次主に使用されるPostmanの機能データの暗号化と復号化さまざまなパラメータ設定実際に送信された...

Linux でファイルをあいまい検索するのに適したコマンドは何ですか?

1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...