Comment accéder à la “clé” de la propriété d'un composant reactjs

Comment puis-je accéder à la key propriété d'un composant. J'ai pensé qu'il serait dans ce.accessoire, mais il ne l'est pas.

par exemple

<ProductList
    key = {list.id}
    listId = {list.id}
    name = {list.name}
    items = {list.items}
/>

et dans la liste de produit si je ne

console.log(this.props)

retourne

Object {listId: "list1", name: "Default", items: Array[2]}

Avec pas de propriété de la clé à tous. Je peux créer une autre propriété et affecter la même valeur, mais il semble redondante, car la propriété de la clé est déjà utilisée.

Aussi, la propriété de la clé doivent être uniques dans l'ensemble de la composante, ou tout simplement dans la boucle ou de la collection, il est en cours de rendu de?

InformationsquelleAutor MonkeyBonkey | 2015-11-12
  1. 32

    La key propriété est utilisée par Réagir sous le capot, et n'est pas exposé à vous. Vous aurez envie d'utiliser une propriété personnalisée et de transmettre ces données. Je recommande un point de vue sémantique significative nom de la propriété; key est uniquement pour vous aider à identifier un nœud DOM au cours de la réconciliation, afin d'avoir une autre propriété appelée listId de sens.

    La key propriété n'a pas besoin d'être unique pour l'ensemble du composant, mais je pense qu'elle doit être unique pour le niveau d'imbrication vous êtes dans l' (donc généralement la boucle ou de la collection). Si Réagissent détecte un problème avec double keys (dans la version de développement), il renvoie une erreur:

    Avertissement: flattenChildren(...): Rencontré deux enfants avec la même clé, .$a. Enfant les clés doivent être uniques; lorsque deux enfants partagent une clé, seul le premier enfant sera utilisé.

    InformationsquelleAutor Michelle Tilley
  2. 12

    Clé : this._reactInternalFiber.key

    Indice : this._reactInternalFiber.index

    • Cette réponse est pour ceux qui veulent vraiment accéder à la clé ne recherche pas un conseil
    • Gardez à l'esprit que c'est accéder à Réagir internes. L'équipe peut Réagir renommer/supprimer _reactInternalFiber, sans préavis et sans le marquer comme une modification de rupture.
    InformationsquelleAutor Ghominejad