反应：`return` 来自组件的数组，`key` 值问题

Question

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

所以我是这样做的：

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

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

这会引发错误

Warning: Each child in an array or iterator should have a unique "key" prop. See https://reactjs.org/docs/lists-and-keys.html#keys for more information. in BComponent (created by 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

希望对您有所帮助。

反应：`return` 来自组件的数组，`key` 值问题

React: `return` an array from component, `key` value issue

reactjs

react-16