时间戳

首页 > 解决方案 > React 元素的键是否需要在直接子级上？

reactjs - React 元素的键是否需要在直接子级上？

问题描述

假设在我的渲染函数中，我有一个这样的迭代：

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

我假设，为简化起见，可以让“元素”组件本身key在其渲染函数中（在根元素中）渲染它，这样我就可以像这样重写迭代：

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

但是，假设在某些特定情况下，我需要将 Element 包装在这样的 div 中：

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

现在“节点数组”的直接子节点不再携带key道具了！

但是，这不再在控制台中生成警告。

所以我的问题是：我是否在做一些不允许/未定义的行为？我应该将key“元素”组件移动到外部 div 吗？还是没关系？

标签： reactjs

解决方案

奇怪的是，即使您认为这不是您需要的方式，您也没有丢失关键警告。正如@jonrsharpe send React 告诉您将密钥放在您的第一个代码中，您不需要在元素内执行此操作，这不是一个好的行为。

推荐阅读