Как вернуть несколько элементов в JSX

Как обойти ограничение JSX при необходимости возвращать несколько элементов из компонента

При написании JSX в React есть одно предостережение: вы должны вернуть один родительский элемент. Не больше одного.

Например, это невозможно:

const Pets = () => {
  return (
    <Dog />
    <Cat />
  )
}

Один из «классических» способов решить эту проблему - обернуть компоненты и другие элементы HTML вdiv:

const Pets = () => {
  return (
    <div>
      <Dog />
      <Cat />
    </div>
  )
}

Однако это создает проблему - есть элемент HTML, который был введен только для того, чтобы наш JSX работал, не обязательно в результирующем HTML, но на этом он заканчивается.

Одно из решений - вернуть массив элементов JSX:

const Pets = () => {
  return [
      <Dog />,
      <Cat />
  ]
}

Другое решение - использовать Fragment, относительно новую функцию React, которая решает проблему для нас:

const Pets = () => {
  return (
    <Fragment>
      <Dog />
      <Cat />
    </Fragment>
  )
}

это работает какdivэлемент, который мы добавили ранее, но он не будет отображаться в итоговом HTML-коде, отображаемом в браузере. Беспроигрышный вариант.

Скачать мою бесплатнуюСправочник по React

Как вернуть несколько элементов в JSX

Как обойти ограничение JSX при необходимости возвращать несколько элементов из компонента

Больше руководств по реакции: