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

Как я могу получить доступ к 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]}

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

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

Ответ 1

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

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

Предупреждение: flattenChildren (...): Обнаружены два ребенка с одним и тем же ключом .$a A. Детские ключи должны быть уникальными; когда двое детей делят ключ, будет использоваться только первый ребенок.

Ответ 1

Ответ 2