反応ループデータの実装(リスト)

反応ループデータの実装(リスト)

まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくするために、データを単純にシミュレートします。

   './image/bg3.png' から bg3 をインポートします。
   コンストラクタ(props){
      スーパー(小道具)
      この状態 = {
      ///ここにリスト:[
            { id:1,img:bg3},
            { id:2,img:bg3},
            { id:3,img:bg3},
            { id:4,img:bg3},
            { id:5,img:bg3},
         ]、 
     ///     
      }
   }

次にマップメソッドを使用してループアウトします

  {
        this.state.list.map((item,key) => {
            戻る (
              <div className="winfor" onClick={() => console.log(item.id)}>
                 <img src={item.img} className="winforimg" />
                    
                 
              </div>
            )
          })
  }

追加: React ループ リスト

React をインポートし、{Component} を 'react' から取得します。
'./logo.svg' からロゴをインポートします。
'./App.css' をインポートします。
'./Person/Person' から {Person,Twoway} をインポートします。
 
クラスAppはComponentを拡張します{
  状態={
    人物:[{name:'リトルフェアリー',年齢:'18'},{name:'シャオユウ',年齢:'18'},{name:'ジアシュアン',年齢:'18'}],
 
  }
 
  与える(){
    const listItems = this.state.persons.map((item,index) =>
       <人物名={item.name} 年齢={item.age} キー={index} />
     );
      戻る(
        <div className="アプリ">
             {リスト項目}
        </div>
      )      
  } 
} 
デフォルトのアプリをエクスポートします。

これで、React Loop Dataの実装に関するこの記事は終了です。React Loop Dataの関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React Nativeアバタースクロールの例
  • プラグインなしのデジタルスクロール効果のReactの例
  • Reactは無限ループスクロール情報を実装する

<<:  docker で nginx+php+mysql を設定する方法

>>:  MySQL でコマンドを使用して階層検索を実現する方法の詳細な説明

推薦する

MySQL 入門 - SQL 実行プロセス

目次1. プロセス2. コアアーキテクチャ2.1 サーバー層の基本コンポーネントの紹介3. ステート...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)

適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...

Dockerコンテナのセルフスタートを実装する方法

コンテナの自動起動Docker は、コンテナが終了したとき、または Docker が再起動されたとき...

レスポンシブWebデザイン学習(1) - 画面サイズと使用率の決定

最近では、モバイルデバイスがますます普及しており、ユーザーがスマートフォンやタブレットを使用して W...

Linux に Python クローラー スクリプトを展開し、スケジュールされたタスクを設定する方法

昨年、プロジェクトの必要性により、Python でクローラーを作成しました。クロールされたデータは、...

MySQL での数値のフォーマットの詳細な説明

最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...

Centos 6.9 に MySQL をインストールするための詳細なチュートリアル

1. MySQLがインストールされているかどうかを確認します。次のコードで確認できます。 [root...

Linux Cron によるパラメータ付き PHP コードのスケジュール実行

1. 引き続き PHP スクリプトを使用して実行します。コマンドラインに入力: php /home/...

vue_drf は SMS 認証コードを実装します

目次1. 需要1. 需要2. SDKパラメータ設定1. ディレクトリ構造3. コードの実装1. バッ...

WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します

目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...

CSS3入力ボックスの実装コードはGoogleログインのアニメーション効果に似ています

CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...

MySQLはランダムに一定数のレコードを抽出します

以前は、このような使用シナリオを処理するために rand() で直接 order していましたが、効...

初心者向け入門チュートリアル④:サブディレクトリのバインド方法

これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...

垂直方向の中央揃えをエレガントに実現する方法を教えます(推奨)

序文CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に...