Jak uzyskać dostęp do właściwości "key" z komponentu reactjs

Question

Jak uzyskać dostęp do właściwości komponentu key. Myślałem, że to będzie w tym, ale nie jest.

np.

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

i listy produktów, jeśli to zrobię

console.log(this.props)

powraca

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

Bez klucza własności w ogóle. Mogę utworzyć inną właściwość i przypisać jej tę samą wartość, ale wydaje się ona zbyteczna, ponieważ właściwość klucza jest już używana.

Czy własność klucza musi być unikalna w całym komponencie, czy tylko w pętli lub kolekcji, z której jest renderowana?

Answer 1

Właściwość key używana jest przez React pod maską i nie jest narażona na działanie użytkownika. Będziesz chciał użyć niestandardowej właściwości i przekazać te dane. Polecam semantycznie wymowną nazwę właściwości; key służy jedynie do identyfikacji węzła DOM podczas uzgadniania, więc posiadanie innej właściwości o nazwie listId ma sens.

Właściwość key nie musi być unikalna dla całego komponentu, ale uważam, że powinna być unikalna dla poziomu zagnieżdżenia, w którym się znajdujesz (czyli ogólnie dla pętli lub kolekcji). Jeśli funkcja React wykryje problem z duplikatem key s (w wersji rozwojowej), wygeneruje błąd:

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.