リストとキー

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

n/a.ターゲット

  • リストとKeyについて

    8.リストとキー


    8-1. 複数のエンティティをレンダリング

  • li要素セットを作成し、カッコ{}を使用してJSXに含めることができます.
    • const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => 
  <li>{number}</li>
 );
  • の後、list配列をul要素に含めてDOMにレンダリングします.
    • ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

    8-2. 既定のリスト構成部品

  • 上のコードを次のようにアセンブリ化します.
    • function NumberList({ 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')
);
  • numbers配列が受信され、出力の順序のないリストに問題はありませんが、コンソールを表示すると、リストの各項目にキーを追加するよう警告が表示されます.
  • 参照、警告が表示されていても反応器は自分でインデックスを書くので普通に使えます.

    • 8-3. Key

  • Keyは、反応物がどの項目を変更、追加、または削除するかを識別するのに役立ちます.
  • は同時に、装飾に安定した固有性を与える役割も果たしている.
    • const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);
  • Keyを選択する最良の方法は、リスト内のアイテムを一意に識別するために1つの文字列を使用することである.
  • の多くは、鍵としてデータのIDを使用する.

    • 「」を参照してください。

  • でレンダリングされたアイテムに安定したIDがない場合は、最後のキーとしてアイテムインデックスを使用できます.
    • const listItems = numbers.map((number, index) =>
  <li key={index.toString()}>{number}</li>
);
  • ですが、アイテムの順序が変更される可能性があるため、インデックスをキーとして使用することは推奨されません.

    • 8-4. キーで構成部品を抽出

  • Keyは、map()関数の内部の要素であるリストに配置することが望ましい.例えば、
    • export default function List() {
  const todos = [
    {
      id: 1,
      do: "go to hospital"
    },
    { id: 2, do: "go to cafe" },
    { id: 3, do: "eating dinner" }
  ];

  const Item = (props) => {
    return <li key={props.id}>{props.do}</li>;
  };
  const todoList = todos.map((todo) => <Item {...todo} />);
  return <ul>{todoList}</ul>;
}
    非
  • map関数内部の構成部品にKeyを追加した場合、出力に問題はありませんが、コンソールをチェックすると、先ほど見た鍵を入れる必要があるという警告が表示されます.
    • export default function List() {
  const todos = [
    {
      id: 1,
      do: "go to hospital"
    },
    { id: 2, do: "go to cafe" },
    { id: 3, do: "eating dinner" }
  ];

  const Item = (props) => {
    return <li>{props.do}</li>;
  };
  const todoList = todos.map((todo) => <Item key={props.id} {...todo} />);
  return <ul>{todoList}</ul>;
}
  • 今回map関数内部の素子にkeyを加えるとコンソールにエラーが発生せず、出力効果が良好です.

    • 8-5. Keyは兄弟の間で唯一の値でなければならない。

  • 上のコードでは、キーがサブアセンブリに渡される.
  • の場合、サブエレメントはキー値を知ることができますか?
    • export default function List() {
  const todos = [
    {
      id: 1,
      do: "go to hospital"
    },
    { id: 2, do: "go to cafe" },
    { id: 3, do: "eating dinner" }
  ];

  const Item = (props) => {
    return (
      <li>
        {props.key}
        {props.do}
      </li>
    );
  };
  const todoList = todos.map((todo) => <Item key={todo.id} {...todo} />);
  return <ul>{todoList}</ul>;
}
  • props.キーを追加して上のコードを実行すると、次のエラーが発生します.
    • したがって、鍵はサブコンポーネントに渡されないため、鍵と同じ値が必要な場合は、他の名前のpropsに渡さなければならない. 
    const todoList = todos.map((todo) => <Item key={todo.id} id={todo.id} do={todo.do} />);

    ソース

  • List and Key(React)
    • 🐶 [AVA]抽象クラス🐶
    7-1条件文と繰り返し文