React コンポーネントのループ処理とレンダリング方法

2年 ago
優斗, 朝陽
1 minute

Reactにおいて、コンポーネントをループしてレンダリングするためには、配列のmapメソッドを使用することができます。具体的な手順は次のとおりです：

  1. 最初に、レンダリングする必要のあるコンポーネントデータを含む配列を作成します。
  2. 配列をマップメソッドを使用して繰り返し処理し、各要素にコンポーネントのインスタンスを返し、それを新しい配列に保存します。
  3. 最後に、新しい配列に格納されたコンポーネントインスタンスをページにレンダリングします。

以下はサンプルコードです：

import React from 'react';

const ComponentList = () => {
  const data = [1, 2, 3, 4, 5];
  
  return (
    <div>
      {data.map(item => (
        <Component key={item} data={item} />
      ))}
    </div>
  );
};

const Component = ({ data }) => {
  return <div>{data}</div>;
};

export default ComponentList;

上記の例では、ComponentListコンポーネントがdata配列をマップメソッドで走査し、Componentコンポーネントのインスタンスを返し、新しい配列に保存し、最後に新しい配列のコンポーネントインスタンスをページにレンダリングしています。

bannerAds