Блог

Допустим, что в моей функции рендеринга у меня есть итерация, подобная этой:

 {list.map((item) => (
  <Element key={item.key} item={item} />
)}
  

Я предполагаю, что для упрощения можно заставить сам компонент «Элемент» отображать key в своей функции рендеринга (в корневом элементе), чтобы я мог переписать итерацию следующим образом:

 {list.map((item) => (
  <Element item={item} />
)}
  

Но тогда предположим, что в каком-то конкретном случае мне нужно обернуть элемент в div следующим образом:

 {list.map((item) => (
  <div>
    <Element item={item} />
  </div>
)}
  

Теперь прямой дочерний элемент «массива узлов» больше не несет key prop!

Однако это больше не генерирует предупреждение в консоли.

Итак, мой вопрос: я делаю что-то, что не разрешено / неопределенное поведение? Должен ли я переместить key компонент «Элемент» во внешний div? Или это не имеет значения?

странно, что вы не получаете предупреждение о пропущенном ключе, даже если думаете, что это не так, как вам нужно это делать. Поскольку @jonrsharpe отправляет React сообщение о том, что вам нужно поместить ключ, подобный вашему первому коду, вам не нужно делать это внутри элемента, это не очень хорошее поведение.