React でオブジェクトの配列を表示するには?

Barbara Streisand
リリース: 2024-11-07 21:13:02
オリジナル
969 人が閲覧しました

How to Display an Array of Objects in React?

React でオブジェクトの配列を表示する方法

React でオブジェクトの配列を表示するには、配列を表示要素に変換するマッピング プロセスが必要です。

レンダリングされたアイテムへの配列のマッピング

オブジェクトの配列をレンダリングするには、.map() 関数を利用できます。この関数は、個々の配列要素を入力として受け入れるコールバック関数を受け取ります。

オプション 1: マップされたアイテムを変数に保存する

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

    return (
      <div>
      {listItems }
      </div>
    );
  }</code>
ログイン後にコピー

ここでは、listItems 変数に保存されます。マップされた要素。その後、

内でレンダリングされます。

オプション 2: Return での直接マッピング

または、中間変数:

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }</code>
ログイン後にコピー

このバリエーションでは、マッピング関数は return ステートメント内で直接呼び出されます。

一意の識別子のキー

の場合配列をレンダリングする場合、各項目に一意のキーを提供することが不可欠です。どちらのオプションでも、レンダリングされた各要素にキーが追加され、レンダリングのパフォーマンスが最適化され、効率的な更新が可能になります。

以上がReact でオブジェクトの配列を表示するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート