Bagaimana untuk Memaparkan Susunan Objek dalam Reaksi?

Cara Memaparkan Tatasusunan Objek dalam React

Dalam React, memaparkan tatasusunan objek memerlukan proses pemetaan untuk mengubah tatasusunan menjadi elemen yang boleh dilihat.

Memetakan Tatasusunan kepada Item Dirender

Untuk memaparkan tatasusunan objek, anda boleh menggunakan fungsi .map(). Fungsi ini mengambil fungsi panggil balik yang menerima elemen tatasusunan individu sebagai input.

Pilihan 1: Menyimpan Item Dipetakan dalam Pembolehubah

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

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

Di sini, pembolehubah listItems disimpan elemen yang dipetakan, yang kemudiannya dipaparkan dalam

.

Pilihan 2: Pemetaan Terus dalam Pemulangan

Sebagai alternatif, anda boleh menghapuskan keperluan untuk pembolehubah perantara:

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

Dalam variasi ini, fungsi pemetaan dipanggil terus dalam penyata pulangan.

Kunci untuk Pengecam Unik

Apabila memberikan tatasusunan, adalah penting untuk menyediakan kunci unik untuk setiap item. Dalam kedua-dua pilihan, kunci ditambahkan pada setiap elemen yang diberikan untuk mengoptimumkan prestasi pemaparan dan membolehkan kemas kini yang cekap.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Susunan Objek dalam Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Array for map function this display transform input

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