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

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

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

   './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 でコマンドを使用して階層検索を実現する方法の詳細な説明

推薦する

シェアしたい絶妙なApple風無料アイコン素材18セット

Apple マグカップのアイコンと追加機能 HD ストレージボックス – アドオンパックセイバースノ...

ウェブページデザインのための4つの実践的なヒント

関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...

HTML テーブル マークアップ チュートリアル (9): セル間隔属性 CELLSPACING

テーブルがコンパクトになりすぎないように、テーブル内のセル間に一定の距離を設定できます。基本的な構文...

MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明

この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...

mysql 起動時の ERROR 2003 (HY000) の問題を解決する方法

1. 問題の説明MYSQL を起動すると、図に示すように、「ERROR 2003 (HY000): ...

負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。

ラベルテキストと入力の垂直方向の中央揃えを調整するのは簡単ではありません。padding、verti...

JavaScript 構造化代入の詳細な説明

目次コンセプト配列の分割値を個別に宣言して割り当てるデフォルト値の構造化解除変数値の交換関数によって...

XHTML 2.0 新機能プレビュー

<br />ブラウザが次世代のXHTMLを処理できるようになる前に、このよりリッチなコン...

デザイン理論: テキストの読みやすさと可読性

<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...

MySQLクライアント認証後の接続失敗の問題に対する完璧なソリューション

MySQL 環境をローカル (192.168.1.152) にデプロイし、リモート クライアント 1...

Ubuntuがネットワークに接続できない場合の解決策

仮想マシン内の Ubuntu がネットワークに接続できない場合の効果的な解決策: 1. Ubuntu...

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...

WeChatアプレット学習ノート: ページ構成とルーティング

最近、小さなプログラムの開発を勉強して見直しており、学習結果のいくつかをメモしています。公式の We...

mysql はインデックスを無効にしますか?

mysql の IN はインデックスを無効にしますか?しませんよ! 結果をご覧ください: mysq...