So greifen Sie auf die Eigenschaft "key" von einer reactjs-Komponente zu

Question

Wie kann ich auf die key Eigenschaft einer Komponente zugreifen? Ich dachte, es wäre in diesem.props, aber es ist nicht.

z.B.

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

und in der Produktliste, wenn ich

console.log(this.props)

kehrt

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

Ohne Schlüsseleigenschaft alle an. Ich kann eine andere Eigenschaft erstellen und ihr denselben Wert zuweisen, aber es scheint redundant zu sein, da die Schlüsseleigenschaft bereits verwendet wird.

Muss die Schlüsseleigenschaft auch in der gesamten Komponente oder nur in der Schleife oder Sammlung, von der gerendert wird, eindeutig sein?

Answer 1

Die Eigenschaft key wird von React unter der Haube verwendet und ist Ihnen nicht ausgesetzt. Sie sollten eine benutzerdefinierte Eigenschaft verwenden und diese Daten übergeben. Ich empfehle einen semantisch sinnvollen Eigenschaftsnamen. key dient nur dazu, einen DOM-Knoten beim Abgleich zu identifizieren, daher ist es sinnvoll, eine andere Eigenschaft namens listId zu verwenden.

Die Eigenschaft key muss nicht für die gesamte Komponente eindeutig sein, aber ich glaube, sie sollte für die Verschachtelungsebene, in der Sie sich befinden, eindeutig sein (also im Allgemeinen die Schleife oder Sammlung). Wenn React ein Problem mit dem Duplikat key s (im Entwicklungs-Build) feststellt, wird ein Fehler ausgegeben:

Warning: flattenChildren(...): Encountered two children with the same key, .$a . Child keys must be unique; when two children share a key, only the first child will be used.