リストのレンダリング

ウェブサイト上で作業中に共通のシナリオは、アイテムのリストをレンダリングすることです、それはあなたのフォロワーのリスト、todoアプリ、連絡先リスト、またはリストの任意の種類のメモかもしれません.シンプルな静的なHTMLサイトでは<ul> or <ol> と一緒にタグ<li> それが無順序であるか、それぞれ注文されるかどうかに基づいてリストを提出するタグ.しかし、今日の記事では、reactjsでレンダリングリストに飛び込むでしょう.
他のフレームワークとは異なり、reactjsがJavaScriptの中心であることを知っているので、それは我々が我々のウェブページに機能性を適用するために作り付けのJavaScript機能、キーワードとクラスを使うのを許すことを意味します.我々のWebアプリケーションの項目のリストをレンダリングするには、既存のJavaScript map ()メソッドを使用できます.
map ()メソッドが行うのは、アイテムの配列/リストを反復処理し、各項目を受け取り、そのタスクを実行し、アプリケーションの更新状態またはUIを返すことです.以下は、Map ()メソッドをResponseコンポーネント内で使用する方法の例です.

function ListRendering() {
    const avengers = [ 'Iron Man', 'Captain America', 'Hulk', 'Thor', 'HawkEye'];

    return (
        <div>
            <h1>My Avenger List</h1>
            <ul> 
                { avengers.map( avenger => <li>{avenger}</li> }
            </ul>
        </div>
    );
}

マップメソッドから返された結果のマークアップを保存し、条件付きレンダリングの例と同じように、return文内でレンダリングすることで、マークアップをさらに最適化できます.次のようにします.

function ListRendering() {
    const avengers = [ 'Iron Man', 'Captain America', 'Hulk', 'Thor', 'HawkEye'];
    let avengerList =  avengers.map( avenger => <li>{avenger}</li>

    return (
        <div>
            <h1>My Avenger List</h1>
            <ul> 
                { avengerList }
            </ul>
        </div>
    );
}

反応リストレンダリングのキー
上記の例をブラウザで実行すると、コンソールにエラーが出るかもしれません.

これは反応を使用している間に現れる最も一般的なエラーの一つです.
このエラーの意味は、MAP ()メソッドを使用して項目をレンダリングしたり、他の反復処理を行ったりする際に、常に、キープロップを持ち、キープロップの値をリスト内の各項目に対して一意にする必要があることです.さて、なぜ我々はキープロップを必要としますか?
私たちはキーの支柱を必要とするので、リスト内の項目/項目を変更するには、更新、削除、または追加されているキーのpropを介して反応するのに役立ちます、反応は、UIの更新を効率的に処理します.キープロップを使わずに、リストを反応させるときに起こることの例を挙げましょう.

<ul>
    <li>Iron Man</li>
    <li>Captain America</li>
    <li>Thor</li>
</ul>

リストの冒頭に新しい項目を追加するためのユーザのための機能を追加し、そのユーザーを使用してリストにHulkを入力します.今すぐ更新されたリストになります.

<ul>
    <li>Hulk</li>
    <li>Iron Man</li>
    <li>Captain America</li>
    <li>Thor</li>
</ul>

それは罰金に見えるかもしれませんが、何が起こったのですが、反応は、現在のリスト内の各項目を前のいずれかに比較して、更新されたリストの例“ハルク”は前のリストの“アイアンマン”と比較されるように、値が変更されるように反応するだけでなく、リスト全体のリストをレンダリングするだけではなく、新しいアイテム';Hulk ';をレンダリングします.これはキーが我々の反応アプリのリストの効率的な処理に使用される理由です.
リストにキーを追加する例を挙げましょう

function ListRendering() {
    const avengers = [ 
                                      { 
                                        id: 1, 
                                        name: 'Iron Man'
                                       }, 
                                      { 
                                        id: 2, 
                                        name: 'Captain America' 
                                      }, 
                                      {  
                                        id: 3, 
                                        name: 'Hulk' 
                                       },
                                       { 
                                         id: 4, 
                                         name: 'Thor' 
                                       }, 
                                       { 
                                          id: 5,
                                          name: 'HawkEye'
                                       }
                                     ];
    let avengerList =  avengers.map( avenger => <li key={ avenger.id }>{avenger.name}</li>

    return (
        <div>
            <h1>My Avenger List</h1>
            <ul> 
                { avengerList }
            </ul>
        </div>
    );
}

ここで注意する重要な点は、反応のキーが予約されていて、子供コンポーネントのJSX内では使用できないことです.
ユニークなIDまたは他のユニークな値が我々の配列/リストに存在しない場合、我々はインデックスをコンソールのエラーから自分自身を防ぐためにキーとして使うこともできます、しかし、リストの始めに新しいアイテムを加えている間、問題がまだ我々がキーを持たない状態に類似しているままである間、デフォルトの反応によってインデックスがキーとしてインデックスを使用するので、これはありえます.
しかし、まだ以下のような場合にのみインデックスとして使用できます.

アイテムには一意の値がありません.

リストは静的です.

リストをフィルタリングまたは再注文されません.