リストを実現するためのReactの方法は？

2年 ago
蓮, 翼
1 minute

Reactでリストを実装する方法には次のものがあります：

  1. map()メソッドを使用すると、データ配列を反復処理して新しい配列を生成し、この新しい配列を使用してJSXでリストをレンダリングできます。
const list = [1, 2, 3, 4, 5];

const ListComponent = () => (
  <ul>
    {list.map(item => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);
  1. forループを使用すると、JavaScriptのforループを使用してデータ配列を反復処理し、JSXで生成された要素をループして使用できます。
const list = [1, 2, 3, 4, 5];

const ListComponent = () => {
  const items = [];
  for (let i = 0; i < list.length; i++) {
    items.push(<li key={i}>{list[i]}</li>);
  }

  return <ul>{items}</ul>;
};
  1. Reactコンポーネントの使用：リストの各アイテムがReactコンポーネントである場合、リストを生成するためにJSXでコンポーネントを直接使用することができます。
const ListComponent = () => (
  <ul>
    <ListItem />
    <ListItem />
    <ListItem />
  </ul>
);

const ListItem = () => <li>Item</li>;

Reactでよく使われるリストのレンダリング方法を紹介しました。具体的な状況やニーズに合わせて、適切な方法を選択してリストを実装してください。

bannerAds