Mengapa Kanak-Kanak React Array Saya Memerlukan Kunci Unik?

Memahami Kunci Unik untuk Array Children dalam React.js

Dalam React, adalah penting untuk memberikan kunci unik kepada susunan kanak-kanak untuk mengoptimumkan prestasi dan elakkan yang tidak perlu pemaparan semula.

Isu:
Anda menerima ralat yang menyatakan: "Setiap kanak-kanak dalam tatasusunan harus mempunyai prop 'kunci' unik" semasa memaparkan jadual boleh diisih menggunakan data JSON sumber.

Penyiasatan:

``

{rows}

``
``
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>);

}
});
``

Penyelesaian:
Isu ini berpunca daripada ketiadaan kunci unik untuk elemen yang diberikan dalam komponen TableRowItem.

Untuk memastikan setiap kanak-kanak dalam tatasusunan baris mempunyai prop kunci yang unik, anda mesti menambah kunci kepada elemen dalam komponen TableRowItem juga.

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
      return this.props.columns.map(function(c) {
        return <td key={this.props.key + '-' + c}>{this.props.data[c]}</td>;
      }, this);
    }.bind(this);

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

Dengan menambahkan kunci unik pada elemen, React boleh menjejaki elemen individu dan melakukan kemas kini yang cekap, menghalang pemaparan semula yang tidak perlu bagi keseluruhan baris.

Atas ialah kandungan terperinci Mengapa Kanak-Kanak React Array Saya Memerlukan Kunci Unik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!