Bagaimana untuk Menetapkan Kunci Unik untuk Susunan Kanak-kanak dalam React.js dengan betul?

Memahami Kunci Unik untuk Array Children dalam React.js

Apabila bekerja dengan jadual dinamik dalam React, memberikan kunci unik kepada setiap elemen anak ialah penting untuk rendering yang cekap. Walau bagaimanapun, menghadapi ralat seperti "Setiap kanak-kanak dalam tatasusunan harus mempunyai prop 'kunci' yang unik" boleh mengecewakan.

Pertimbangkan coretan kod berikut:

render: function() {
  return (
    <table key="table">
      <thead key="thead">
        <TableHeader columns={columnNames} />
      </thead>
      <tbody key="tbody">
        {rows}
      </tbody>
    </table>
  );
}

Sementara TableComponent mempunyai kunci yang diberikan kepadanya, setiap elemen baris dalam pembolehubah baris kehilangan kunci unik. Ini akan mencetuskan ralat yang disebutkan.

Untuk menyelesaikan isu ini, pastikan setiap anak tatasusunan mempunyai kunci unik. Dalam kes ini, setiap komponen TableRowItem harus mempunyai kunci sendiri:

<TableRowItem key={item.id} data={item} columns={columnNames} />

Selain itu, kanak-kanak dalam setiap anak tatasusunan juga memerlukan kunci unik. Dalam komponen TableRowItem yang disediakan:

var TableRowItem = React.createClass({
  render: function() {
    var td = function() {
      return this.props.columns.map(function(c) {
        return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
      }, this);
    }.bind(this);

    return (
      <tr>{td(this.props.item)}</tr>
    )
  }
});

Setiap elemen td harus diberikan kunci untuk memastikan React boleh membuat perubahan DOM yang minimum semasa mengemas kini jadual. Gagal memberikan kunci untuk setiap kanak-kanak dalam anak tatasusunan boleh menyebabkan keperluan untuk memaparkan semula keseluruhan baris dan bukannya elemen yang dikemas kini sahaja.

Dengan mengikuti garis panduan ini, anda boleh memastikan pemaparan dinamik yang cekap jadual dalam Bertindak balas dengan kunci unik yang diberikan kepada kanak-kanak tatasusunan dan elemennya. Rujuk dokumentasi React pada Keys untuk mendapatkan maklumat lanjut dan amalan terbaik.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Kunci Unik untuk Susunan Kanak-kanak dalam React.js dengan betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!