{ kembali ( {/* Tidak menggunakan fungsi peta. */} {an"/> { kembali ( {/* Tidak menggunakan fungsi peta. */} {an">

Rumah >hujung hadapan web >tutorial js >Asas React~fungsi peta/ senarai data~

Asas React~fungsi peta/ senarai data~

Susan Sarandon
Susan Sarandonasal
2024-10-07 18:17:02312semak imbas
  • Apabila kami mahu memaparkan senarai data, bagaimanakah kami melakukannya?

・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;


  • Kod ini memaparkan senarai data dengan betul.

・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;


  • Apabila kita ingin memaparkan senarai data, fungsi Peta sering digunakan untuk memaparkan tatasusunan data seperti

  • elemen.

  • Sila jangan lupa untuk meletakkan atribut utama pada

  • elemen.

  • Kod ini lebih bersih daripada yang sebelumnya.

・Ini ialah amaran konsol, sekiranya kami tidak meletakkan atribut utama pada

  • elemen.

    React Basics~map function/ a list of data~

    ・Ini adalah hasil pada skrin.

    React Basics~map function/ a list of data~

    Atas ialah kandungan terperinci Asas React~fungsi peta/ senarai data~. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn