昨年末に、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Win10システムにMySQL 8.0をインストールするときに発生する問題を解決する
>>: Nginxでネットワーク分離を解決した実践記録を詳しく解説
クラスタリングは、実際には InnoDB データベース エンジンに関連しています。したがって、インデ...
n 個のアイテムがあり、これらのアイテムをグリッド レイアウトの列に並べ替える必要があるとします。列...
目次序文1. xinetdサービスに基づく起動管理(1)Telnetサービスのインストール(2)Te...
準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...
find コマンドは、指定されたディレクトリ内のファイルを検索するために使用されます。引数の前の文字...
目次1 設定ディレクトリとデータディレクトリを作成する3 イメージからホストに構成ファイルをコピーす...
目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...
序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...
ZFSの歴史Z ファイル システム (ZFS) は、2001 年に Matthew Ahrens と...
目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...
目次1. はじめに2. 本文2.1 単一列のソート2.2 複数の列を並べ替える2.3 ソート方法2....
序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...
React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...
目次主に使用されるPostmanの機能データの暗号化と復号化さまざまなパラメータ設定実際に送信された...
1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...