Question

注意：我确实理解keys在数组中的重要性。通常我使用.map重复数组并使用index变量.map提供。在我的情况下，我无法访问任何索引变量。我想知道一种比手动添加密钥更好的方法。

所以我这样做：

function AComponent() {
  return <div>
    <BComponent />
    <BComponent />
  </div>
}

function BComponent() {
  return [
    <h2>Title</h2>,
    <p>Description </p>
  ]
}

会抛出错误

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34; 支柱。有关详细信息，请参阅https://reactjs.org/docs/lists-and-keys.html#keys。在BComponent中（由AComponent创建）

所以我需要将BComponent更改为：

function BComponent() {
  // I added the key attribute to each element in the array
  return [
    <h2 key="1">Title</h2>,
    <p key="2">Description </p>
  ]
}

当然，这不是解决此问题的最佳方法。我想知道更好的方法是什么？或者这是React的错误吗？

Answer 1

是的，react希望您将key属性传递给组件，当它是子组数组时。

在此处详细了解：https://reactjs.org/docs/reconciliation.html#recursing-on-children

对于您的用例，您可以像key='1'一样手动添加，也可以使用key='title'和key='description'等适当的描述性密钥添加。

由于我们知道此处的组件不会发生变化，因此添加key道具可能会感觉有点尴尬。

为了避免数组表示法和手动添加每个元素的键，React v16.2引入了另一种方法来返回多个名为React.Fragment的元素。

您可以像这样使用它：

<>
  <h2>Title</h2>
  <p>Description </p>
</>

或者确切地说：

<React.Fragment>
  <h2>Title</h2>
  <p>Description </p>
</React.Fragment>

另外，请注意短语法<></>不支持键或属性。

在此处阅读有关片段的更多信息：https://reactjs.org/docs/fragments.html

通过对React的github的讨论，了解更多相关信息：https://github.com/facebook/react/issues/2127

我希望这会有所帮助。

React：`return`一个来自组件的数组，`key`值问题

1 个答案: