ページにデータを表示する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でネットワーク分離を解決した実践記録を詳しく解説

推薦する

ウェブページで CSS スタイルを適用するさまざまな形式の概要

1. インライン スタイル (<body></body> 内に配置されます)...

JavaScriptの無限ループを検出して防止する方法の詳細な説明

目次序文for文の無限ループを修正while文の無限ループを修正要約する序文Js デッド ループはど...

JSアルバム画像の揺れと拡大表示効果のサンプルコード

前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...

docker windows10共有ディレクトリのマウント失敗の解決策

原因docker スクリプトを実行すると、コンテナを作成できないというエラーが発生します。以下のよう...

Tomcatサーバーのセキュリティ設定方法

Tomcat は、Java Community Process を通じて Sun が開発した、広く使...

誰もが登録できるようにJiedaibaoを宣伝するにはどうすればよいでしょうか? ジエダイバオのプロモーション方法とスキル

借財宝は最近人気が出ている携帯電話ローンソフトウェアプラットフォームです。知人同士の貸し借りが特徴で...

React refsの詳細な紹介

1. 何ですかRefs 、コンピューターでは Resilient File System (ReF...

MySQLログシステムの使い方に関する簡単なチュートリアル

目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...

FileZilla を使用して FTP ファイル サービスを素早く構築する方法

ファイルの保存とアクセスを容易にするために、FTPサービスが特別に構築されています。 FTP サーバ...

新しい CSS :where および :is 疑似クラス関数とは何ですか?

:is と :where とは何ですか? :is()と:where()は、セレクターを作成するとき...

画像とテキストでHTTPヘッダーのあらゆる側面を理解する

HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...

DockerにTomcat8をインストールする方法

1. dockerでtomcat8をインストールする1. Docker HubでTomcatイメージ...

HTML で margin:0 auto を使用するとページ全体が中央に配置されない問題の解決方法

今日、jsp ページを書きました。<div style="margin:0 auto...

vue N​​progress のプログレスバー機能を実装する際の一般的な問題

NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...