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

ПРИМЕЧАНИЕ. Я понимаю важность 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#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?


reactjs react-16
person Asim K T    schedule 10.01.2018    source источник
comment
Возможный дубликат Понимание уникальных ключей для дочерних элементов массива в React.js< /а>   -  person Scimonster    schedule 10.01.2018
comment
Лучшим способом было бы добавить ключ к <BComponent/>   -  person paqash    schedule 10.01.2018
comment
простым решением будет вместо возврата массива вернуть div и поместить в него весь элемент.   -  person Mayank Shukla    schedule 10.01.2018
comment
@Scimonster Нет. Я думаю, что мой вопрос в другом. Я понимаю важность ключей и добавляю их. Если бы я использовал .map(), у меня был бы доступ к переменной index. В этом случае (эта функция была введена в React 16) мне приходится добавлять ключи вручную.   -  person Asim K T    schedule 10.01.2018
comment
Спасибо @MayankShukla. Но я хочу знать, как лучше.   -  person Asim K T    schedule 10.01.2018
comment
@AsimKT, если вы хотите вернуть массив, его нет. Вы должны определить свои собственные ключи. Если вы не хотите заворачивать его в обертку div, как предлагает Mayank Shukla, попробуйте фрагменты. См. здесь: stackoverflow.com/a/45434522/2030321   -  person Chris    schedule 10.01.2018
comment
Возможный дубликат Ошибка синтаксического анализа: смежный JSX элементы должны быть заключены в закрывающий тег   -  person Chris    schedule 10.01.2018
comment
Я не думаю, что это дубликат любого из вопросов, связанных выше.   -  person Dangling Cruze    schedule 10.01.2018

Ответы (1)


arrow_upward
3
arrow_downward

Да, реакция предполагает, что вы передадите свойство 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

Пройдите это обсуждение на github React, чтобы узнать больше об этом: https://github.com/facebook/react/issues/2127

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

person Dangling Cruze    schedule 10.01.2018