ループレンダリング

ループレンダリングが必要なシナリオでは、Reactでの以下の記述方法に似て、宜搭はループデータの構成項目を提供し、変数バインディングを通じてループレンダリングを簡単に実現できます：

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

構成

ループデータは配列構造を要求し、文字列配列、数値配列、またはオブジェクト配列が可能です。ユーザーは高度な属性のループデータ設定でループを設定できます：

ユーザーはループデータをバインドする方法として以下の2つを使用できます：

静的設定- レンダリングに必要な静的配列データを構成；
変数バインディング- ユーザーは変数をバインドしてグローバル変数またはリモートAPIからループデータを取得できます；

ループ設定を完了した後、ループ本体内部のコンポーネントは以下の2つの注入コンテキストを通じてループデータ内部の構造を取得できます：

this.item- 現在行のループデータを取得；
this.index- 現在行のループインデックス（0から開始）を取得；

ループネストシナリオでは、イテレーション変数名およびインデックス変数名をカスタマイズしてコンテキスト注入変数情報を指定し、競合を避けることができます：

ヒント

ループデータを構成したコンポーネントは、アウトラインツリーにループ用の小さなアイコンを表示して、コンポーネントにループデータが設定されていることを示します：

使用シナリオ

次に簡単な例を使って、ループデータを使用して学生リストを表示する方法を紹介します。

学生情報を保存するためのグローバル変数を作成します：
ページにループデータをバインドするコンテナコンポーネントをドラッグします：
コンテナに学生名(name)および学生年齢(age)をバインドするための2つの文言コンポーネントを配置します：
これで右上隅のプレビューボタンをクリックすると、ループレンダリングの効果が確認できます：
学生の趣味(hobby)も配列であることが判明したため、それらをレンダリングするにはループネストを使用する必要があります。そのため、コンテナに文書コンポーネントを追加して趣味をループレンダリングします（文書が外側のループコンテンツにアクセスできるようにするために、文書コンポーネントにカスタムのイテレーション変数名およびインデックス変数名を設定しました）：
次に文書の内容属性に変数をバインドして2回のループコンテンツを同時に表示できます：
最後にプレビューボタンをクリックすると、以下のプレビュー効果が表示されます：