なぜmap関数を適用するときにキーpropsを与えるのか

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

既定のリスト構成部品

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
上記の基本リスト要素を使用すると、elemnet内にkeyの値がなく、keyを入れるべきであることを示す.

上記キー値を含むデフォルトのリスト構成部品

  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
keyとは?keyは、Reactが変更、追加、または削除するアイテムを決定するのに役立ちます.element安定した固有性を与えるためには、アレイ内部のセルに指定する必要があります.鍵を選択する最良の方法は、リスト内の他の項目間で当該項目を識別できる文字列を使用することであるが、登録された降伏を安定させるIDがなければ、最後の手段はindexキーを使用することである.
キー値がない場合に発生するエラー キー値関数 keyは周囲に並ぶコンテキストにのみ意味がある.map()関数の内部の要素にキーを追加することが望ましい。 keyは、兄弟間で一意の値でなければなりませんが、範囲全体で一意である必要はありません。2つの異なる配列を作成するときに、同じkeyを使用できます。
[テストエンコーディング]JavaScript#9
iOSでのurl符号化の問題