Comment attribuer correctement des clés uniques aux enfants du tableau dans React.js ?

Comprendre les clés uniques pour les enfants de tableau dans React.js

Lorsque vous travaillez avec des tables dynamiques dans React, l'attribution de clés uniques à chaque élément enfant est indispensable pour un rendu efficace. Cependant, rencontrer des erreurs telles que « Chaque enfant dans un tableau doit avoir un accessoire 'clé' unique" peut être frustrant.

Considérez l'extrait de code suivant :

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

Alors que le TableComponent a un clé qui lui est assignée, il manque une clé unique à chaque élément de ligne dans la variable rows. Cela déclenchera l'erreur mentionnée.

Pour résoudre ce problème, assurez-vous que chaque enfant du tableau possède une clé unique. Dans ce cas, chaque composant TableRowItem doit avoir sa propre clé :

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

De plus, les enfants de chaque tableau enfant nécessitent également des clés uniques. Dans le composant TableRowItem fourni :

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

Chaque élément td doit se voir attribuer une clé pour garantir que React puisse apporter des modifications minimales au DOM lors de la mise à jour de la table. Ne pas fournir de clé pour chaque enfant dans le tableau child peut entraîner la nécessité de restituer la ligne entière au lieu de simplement l'élément mis à jour.

En suivant ces directives, vous pouvez garantir le rendu efficace des éléments dynamiques. tables dans React avec des clés uniques attribuées aux enfants du tableau et à leurs éléments. Reportez-vous à la documentation React sur les clés pour plus d'informations et les meilleures pratiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!