ホームページ > ウェブフロントエンド > jsチュートリアル > Reactの基礎〜map関数・データの一覧〜

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

Susan Sarandon
リリース: 2024-10-07 18:17:02
オリジナル
298 人が閲覧しました
  • データの一覧を表示したい場合はどうすればよいですか?

・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 Basics~map function/ a list of data~

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

    React Basics~map function/ a list of data~

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

    ソース:dev.to
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート