React でオブジェクトの配列をレンダリングするにはどうすればよいですか?

React でのオブジェクトの配列のレンダリング

React でオブジェクトの配列からのデータのリストを表示するには、従来とは少し異なるアプローチが必要ですHTML.

アプローチ 1: React 要素の配列を作成する

React でオブジェクトの配列をレンダリングする 1 つの方法は、まず React 要素の配列を作成することです。配列内の単一の項目を表します。以下に例を示します。

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

  return (
    <div>
      {listItems}
    </div>
  );
}

このアプローチでは、配列内の項目ごとに新しい React 要素を作成し、各項目が識別用の一意のキーを持つようにします。

アプローチ 2: Return のインライン マップ関数

別の方法は、マッピング関数を JSX return ステートメントに直接組み込むことです。

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  return (
    <div>
      {data.map((d, idx) => <li key={idx}>{d.name}</li>)}
    </div>
  );
}

このアプローチでは、次のような別個の配列を作成する必要がなくなります。 React 要素。コードをより簡潔にします。

Key プロパティ

オブジェクトのリストをレンダリングするときに、各 React 要素に一意のキー プロパティを割り当てることが重要です。これにより、データが変更されたときに React が DOM 内の特定の要素を効率的に識別して更新できるようになります。

以上がReact でオブジェクトの配列をレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。