昨年末に、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でネットワーク分離を解決した実践記録を詳しく解説
1. インライン スタイル (<body></body> 内に配置されます)...
目次序文for文の無限ループを修正while文の無限ループを修正要約する序文Js デッド ループはど...
前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...
原因docker スクリプトを実行すると、コンテナを作成できないというエラーが発生します。以下のよう...
Tomcat は、Java Community Process を通じて Sun が開発した、広く使...
借財宝は最近人気が出ている携帯電話ローンソフトウェアプラットフォームです。知人同士の貸し借りが特徴で...
1. 何ですかRefs 、コンピューターでは Resilient File System (ReF...
目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...
ファイルの保存とアクセスを容易にするために、FTPサービスが特別に構築されています。 FTP サーバ...
:is と :where とは何ですか? :is()と:where()は、セレクターを作成するとき...
HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...
<meta name="viewport" content="w...
1. dockerでtomcat8をインストールする1. Docker HubでTomcatイメージ...
今日、jsp ページを書きました。<div style="margin:0 auto...
NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...