ループレンダリング

function NameList() {
  const names = [{
    name: 'Jack'
  }, {
    name: 'Rose'
  }];
	return (
  	<div>
    {
      names.map((item, index) => (
        <span>{ `No.${index}: ${item.name}` }</span>
      ))
    }
    </div>
  );
}

​

設定

• 静的設定 - レンダリング対象の静的な配列データを設定します。
• 変数バインディング - 変数をバインディングし、グローバル変数またはリモート API からループデータを取得します。

• this.item - 現在のレコードのループデータを取得します。
• this.index - 現在のレコードのループインデックスを取得します（0 から始まります）。

​

ユースケース

• 学生情報を保存するグローバル変数を作成します。以下のとおりです。
• コンテナコンポーネントをページにドラッグし、ループデータをバインディングします。以下のとおりです。
• 2 つのテキストコンポーネントをコンテナに配置し、学生の名前 (name) と年齢 (age) をバインディングします。以下のとおりです。
• 右上のプレビューボタンをクリックすると、ループレンダリングの効果を確認できます。以下のとおりです。
• 学生の趣味も配列であることがわかります。これをレンダリングするにはネストされたループが必要です。もう 1 つのテキストコンポーネントをコンテナにドラッグし、趣味をループレンダリングします。（テキストコンポーネントが外側のループのコンテンツにも同時にアクセスできるように、テキストコンポーネントにカスタムの反復変数名とインデックス変数名を設定します。）
• 次に、テキストの content 属性に変数をバインディングし、両方のループのコンテンツを表示します。以下のとおりです。
• 最後にプレビューボタンをクリックすると、以下のプレビュー効果を確認できます。