ホームページ  >  記事  >  ウェブフロントエンド  >  Map 関数を使用して React でオブジェクトの配列をレンダリングする方法

Map 関数を使用して React でオブジェクトの配列をレンダリングする方法

DDD
DDDオリジナル
2024-11-06 18:05:02289ブラウズ

How to Render an Array of Objects in React Using the Map Function?

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

React でのリストのレンダリングは、動的データを表示するために不可欠です。このガイドでは、マップ関数を使用して React でオブジェクトの配列を効率的にレンダリングする方法を紹介します。

アプローチ:

次の React コンポーネントを検討してください:

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

    return (
      <div>
        Hello
      </div>
    );
  }
}</code>

オブジェクトの配列をレンダリングするには、主に 2 つのアプローチがあります:

最初のアプローチ:

マップされた配列を変数に代入し、それをレンダリング関数内で返します。 :

<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>

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>

以上がMap 関数を使用して React でオブジェクトの配列をレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。