Bagaimana untuk Membuat Susunan Objek dalam Reaksi Menggunakan Fungsi Peta?

Memaparkan Tatasusunan Objek dalam React

Memaparkan senarai dalam React adalah penting untuk memaparkan data dinamik. Panduan ini mempamerkan cara untuk memaparkan tatasusunan objek dalam React dengan cekap menggunakan fungsi peta.

Pendekatan:

Pertimbangkan komponen React berikut:

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

    return (
      <div>
        Hello
      </div>
    );
  }
}</code>

Terdapat dua pendekatan utama untuk memaparkan tatasusunan objek:

Pendekatan Pertama:

Tetapkan tatasusunan yang dipetakan kepada pembolehubah dan kembalikannya dalam fungsi pemaparan :

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

Pendekatan Kedua:

Benamkan fungsi peta secara langsung dalam pernyataan pulangan:

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

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