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

Linda Hamilton
リリース: 2024-11-06 07:49:02
オリジナル
551 人が閲覧しました

How to Render an Array of Objects in React?

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

このクエリは、React でオブジェクトのリストをレンダリングする試みを示しています。ただし、 render() メソッド内に必要な return ステートメントがありません。これに対処し、包括的な解決策を提供しましょう:

解決策:

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

方法 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>
ログイン後にコピー

方法 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>
ログイン後にコピー

Inどちらの方法でも、データは要素のリストにマップされます。 React の要求に応じて、各要素に一意のキー プロパティが割り当てられます。このキーにより、効率的な再レンダリングが保証され、各リスト項目の ID が維持されます。

これらのソリューションは、React でオブジェクトの配列をレンダリングするための信頼性が高く柔軟な方法を提供します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!