Реакция: `возврат` массива из компонента, проблема с ключом

Question

ПРИМЕЧАНИЕ: я понимаю важность keys в массивах. Обычно я использую.map для повторения над массивом и использую index переменная .map обеспечивает. В моем случае у меня нет доступа к какой-либо индексной переменной. Я хочу узнать лучший способ, чем добавлять ключи вручную.

Итак, я делал это:

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

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

Который выдает ошибку

Предупреждение: каждый дочерний элемент в массиве или итераторе должен иметь уникальную "ключевую" опору. См. https://reactjs.org/docs/lists-and-keys.html для получения дополнительной информации. в 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

Да, реагирует на вас key свойство компонента, когда он является частью массива дочерних элементов.

Подробнее об этом читайте здесь: https://reactjs.org/docs/reconciliation.html

Для вашего случая вы можете добавить их вручную, как key='1' или с соответствующими описательными ключами, такими как key='title' а также key='description',

Это добавление key prop может чувствовать себя немного неловко, поскольку мы знаем, что компоненты здесь не изменятся.

Чтобы избежать записи в массиве и вручную добавлять ключи к каждому элементу, в 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

Чтобы узнать больше об этом, ознакомьтесь с GitHub для React: https://github.com/facebook/react/issues/2127

Надеюсь, это поможет.