React map key props

5791 ワード
React テキストリンク

Key


keyは、reactが変更、追加、または削除するアイテムを識別するのに役立ちます.
keyは、要素に安定した固有性を与えるために、アレイ内部の要素に指定する必要があります.
const contentComments = {[
        {
          'id'  : 0,
          'name': 'day',
          'text': '안녕하세요 테스트 중입니다!'
        }, {
          'id'  : 1,
          'name': 'young',
          'text': 'hi test '
        }];
}
contentComments.map((list) =>
  <li key={list.id}>
    {list.name}
    {list.text}
  </li>
);
  keyは、他の項目間で固有に識別できるものを使用する.
ex)DBプライマリキーのように、ほとんどの場合データです.id値として使用されるkey.
レンダー項目に値を設定するidがない場合は、indexをキーとして使用できます.
contentComments.map((list, index) =>
  <li key={index}>
    {list.name}
    {list.text}
  </li>
);
ただし、順序が変更可能であればkey에 인덱스를 사용하는 것은 권장하지 않는다.これにより、パフォーマンスが低下したり、ステータスに関連する問題が発生する可能性があります.
リストにキーが指定されていない場合、reactはデフォルトでindexをキーとして使用します.
<div className="main-content">
  {mainContentObj.map(( list ) => (
    <PostContent mainContentObj={list} key={list.id}/>
    ))}
</div>
書くにはmap()関数の内部に要素にキー値を追加したほうがいいです.key는 형제 사이에서만 고유한 값이어야 한다. key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.2つの異なる配列を作成する場合は、同じキーを使用できます.
文にファイルを繰り返す文字列[shell script]
効果javaアイテム6整理