Как получить доступ к свойству «ключ» из компонента reactjs

Question

Как получить доступ к свойству key компонента. Я думал, что это будет в этом.props, но это не так.

например.

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

и в списке продуктов, если я

console.log(this.props)

возвращается

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

При отсутствии ключевого свойства на всех. Я могу создать другое свойство и присвоить ему такое же значение, но он кажется лишним, поскольку свойство ключа уже используется.

Кроме того, свойство ключа должно быть уникальным во всем компоненте или просто в цикле или коллекции, из которой оно создается?

Answer 1

Свойство key используется React под капотом и не подвергается действию. Вы захотите использовать настраиваемое свойство и передать эти данные. Я рекомендую семантически значимое имя свойства; key предназначен только для идентификации узла DOM во время сверки, поэтому имеет смысл другое свойство, называемое listId.

Свойство key не обязательно должно быть уникальным для всего компонента, но я считаю, что он должен быть уникальным для уровня вложенности, в котором вы находитесь (как правило, в цикле или коллекции). Если React обнаружит проблему с дубликатом key s (в сборке разработки), она выдаст ошибку:

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.