1

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

所以我这样做了：

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

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

这会引发错误

警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。有关更多信息，请参阅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 的错误？

4

1 回答 1

3

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

在此处阅读更多信息：https ://reactjs.org/docs/reconciliation.html#recursing-on-children

对于您的用例，您可以像手动添加它们，也可以key='1'使用适当的描述性键（如key='title'and ）添加它们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

我希望这有帮助。

于 2018-01-10T10:52:07.227 回答