Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memberikan Tatasusunan Objek dalam Reaksi?

Bagaimana untuk Memberikan Tatasusunan Objek dalam Reaksi?

Patricia Arquette
Patricia Arquetteasal
2024-11-06 03:26:02616semak imbas

How to Render Arrays of Objects in React?

Merender Tatasusunan Objek dalam React

Dalam React, memaparkan senarai data daripada tatasusunan objek memerlukan pendekatan yang sedikit berbeza daripada tradisional HTML.

Pendekatan 1: Cipta Tatasusunan Elemen React

Salah satu cara untuk memaparkan tatasusunan objek dalam React ialah dengan mula-mula mencipta tatasusunan elemen React, setiap satu mewakili satu item dalam tatasusunan. Berikut ialah contoh:

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

  return (
    <div>
      {listItems}
    </div>
  );
}

Pendekatan ini mencipta elemen React baharu untuk setiap item dalam tatasusunan, memastikan setiap item mempunyai kunci unik untuk pengenalan.

Pendekatan 2: Fungsi Peta Sebaris sebagai Pulangan

Kaedah alternatif ialah memasukkan fungsi pemetaan secara langsung dalam penyata pulangan JSX:

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  return (
    <div>
      {data.map((d, idx) => <li key={idx}>{d.name}</li>)}
    </div>
  );
}

Pendekatan ini menghapuskan keperluan untuk mencipta tatasusunan berasingan bagi Elemen bertindak balas, menjadikan kod lebih ringkas.

Harta Utama

Adalah penting untuk menetapkan sifat kunci unik kepada setiap elemen React apabila memaparkan senarai objek. Ini membolehkan React mengenal pasti dan mengemas kini elemen tertentu dengan cekap dalam DOM apabila data berubah.

Atas ialah kandungan terperinci Bagaimana untuk Memberikan Tatasusunan Objek dalam Reaksi?. 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