Bagaimana untuk Memberikan Tatasusunan Objek dalam Reaksi?

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!