Reactはページング効果を実装する

Reactはページング効果を実装する

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

まず、antdとaxiosがインストールされていることを確認してください

jsx ファイル:

React をインポートし、{useState、useEffect} を 'react' から取得します。
'antd' から { Pagination } をインポートします。
'./loading.scss' をインポートします
'../hml' からユニットをインポートします
定数App = () => {
    // ページ番号を設定する const [num, setNum] = useState(1)
    // 取得したデータキャリア const [data, setData] = useState([])
    //マウントメソッドを使用しただけで、二次取得は簡単ではありませんuseEffect(() => {
        Unit.getApi2('/home/mediareports', {
            //データページ page_number: num,
            // ページあたりのデータ量 page_size: 10
        }, {}).then((res) => {
            //データを取得する setData(res.data.data)
        })
    }, [数字])
    定数を追加する = (e) => {
        // クリックするごとに1ページ進む setNum(e)
    }
    戻る (
        <>
            <ul>
                {/* マップはデータを生成します */
                {
                    data.map((item,index)=>{
                        <a href={item.jump_url} key={index}><br /> を返します。
                            {
                                アイテム.メインタイトル
                            }
                        </a>
                            
                    })
                }
            </ul>
            ここでの問題は解決されていますが、アップロード e が要素ではなく現在のクリックされたインデックスを取得できる理由はわかりませんが、合計に関連していると思います* です。
            <ページネーション defaultCurrent={num} total={500} onChange={(e)=>add(e)}/>
        </>
    )
}
デフォルトアプリをエクスポート

.scss ファイルを読み込み中:

// antd にはスタイルがありません。次のコードでこの問題を解決できます @import '~antd/dist/antd.css';

hml.js: (これは私が送信した axios パッケージです)

'axios' から axios をインポートします。
定数ユニット = {
    非同期getApi(ajaxCfg){
        データをaxios.get(ajaxCfg.url,{params:ajaxCfg.cfg}, で待ちます。
        {
            ヘッダー: ajaxCfg.headers
        })
        データを返します。
    },
    非同期 getApi2(url,cfg,headers){
        data = axios.get(url,{params:cfg}, を待ちます。
        {
            ヘッダー: ヘッダー
        })
        データを返します。
    },
    非同期 postApi(url,cfg,headers){
        fd = new FormData();
        for(let key in cfg){
            fd.append(キー、cfg[キー]);
        }
        data = axios.post(url,fd, を待ちます。
        {
            ヘッダー: ヘッダー
        })
        データを返します。
    },
    非同期 putApi(url,cfg,headers){
        // 'qs' から qs をインポートします。
        // data = axios.put(url,qs.stringify(cfg),{ を待機します。
        // ヘッダー: {
        // 'コンテンツタイプ':'application/x-www-form-urlencoded',
        // }
        // })
        // データを返します。
    },
    非同期リクエストAPI(cfg、ヘッダー、ファイル){
       fd = new FormData();
       fd.append('param', JSON.stringify(cfg));
       if(ファイル){
           // アップロード証明 if(file.length){
               for(let i=0,len=file.length;i<len;i++){
                   fd.append('ファイル', ファイル[i]);
               }
           }それ以外 {
               // 単一アップロード for(let key in file){
                   fd.append(キー、ファイル[キー]);
               }
           }
       }
       データをawait axios.post('/batch',fd,
       {
           ヘッダー: ヘッダー
       })
       データを返します。
   }
}
デフォルトの単位をエクスポートします。

セットアッププロキシ.js:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = 関数 (アプリ) {
  アプリを使用する(
    // パス '/home' を設定し、createProxyMiddleware({
      ターゲット: 'https://home-api.pinduoduo.com',
      変更元: true、
    })
  );
};

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  MySQL 5.6 圧縮パッケージのインストール方法

>>:  VMware Workstation Pro が Windows で実行されない場合の解決策

推薦する

MySQLデータベースとテーブルシャーディングの概要

プロジェクトの開発中に、データベースのデータがどんどん大きくなり、その結果、1 つのテーブルにデータ...

HTML スライドフローティングボールメニュー効果の実装

CSS スタイル html,本文{ 幅: 100%; 高さ: 100%; マージン: 0;パディング...

Linux parted ディスク パーティション実装手順の分析

fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...

Vueは製品の拡大鏡効果を実現します

この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...

MySQL で準備、実行、割り当て解除ステートメントを使用するチュートリアル

序文MySQLでは、準備、実行、割り当て解除を正式にはPREPARE STATEMENTと呼びます。...

複数の古いプレーヤーの埋め込みコード

ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...

HTML ページジャンプとパラメータ転送の問題

HTMLページジャンプ: window.open(url, "", "...

Linuxサービスの監視と運用および保守

目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...

IE6 および IE7 で DIV コンテナの固定高さを使用するためのヒント

IE6 と IE7 では CSS の解釈に多くの違いがあります。今日はそのうちの 1 つである高さに...

Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...

Linux ps および pstree コマンドの知識ポイントのまとめ

Linux の ps コマンドは Process Status の略です。 ps コマンドは、システ...

MySQLのexplain型の詳細な説明

導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

デザインストーリー: ナンバープレートを覚えられない警備員

<br />私が住んでいる地域では、コミュニティに出入りする車両を管理するために、コミュ...

React + Threejs + Swiper パノラマ効果を実現するための完全なコード

パノラマビュー効果を見てみましょう: 住所を表示スクリーンショット: 体験してみると、周囲の環境がぐ...