Reactの基礎〜map関数・データの一覧〜

• データの一覧を表示したい場合はどうすればよいですか?

・src/Example.js

const animals = ["Dog", "Cat", "Rat"];

const Example = () => {
  return (
    <>
      <ul>
        {/* Not using the map function. */}
        <li>{animals[0]}</li>
        <li>{animals[1]}</li>
        <li>{animals[2]}</li>
      </ul>
    </>
  );
};

export default Example;

• このコードはデータのリストを正しく表示します。

・src/Example.js

const animals = ["Dog", "Cat", "Rat"];

const Example = () => {
  return (
    <>
      <ul>
        {/* Using the map function. */}
        {animals.map((animal) => (
          <li> {animal}</li>
        ))}
      </ul>
    </>
  );
};

export default Example;

• データの一覧を表示したい場合、Map 関数を使用して

のようなデータの配列を表示することがよくあります。 要素。
に key 属性を指定することを忘れないでください。 要素。

• このコードは前のコードよりもきれいです。

・これは、

に key 属性を設定しない場合のコンソールの警告です。要素。

・これが画面上の結果です。

以上がReactの基礎〜map関数・データの一覧〜の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。