Фрагменты реакции
В React Fragment используется для возврата нескольких элементов внутри компонента.
Давайте разберемся с этой концепцией на примере. Я создал компонент с именем ReactFragment и возвращаю Hello внутри тега h1.
Теперь я хочу вернуть свое имя внутри другого тега h1. Итак, что я буду делать? Я напишу еще один тег h1, как на картинке ниже.
Посмотрим вывод в браузере.
Как мы видим, приложение аварийно завершает работу с ошибкой: «Смежные элементы JSX должны быть заключены в закрывающий тег. Вам нужен фрагмент JSX ‹›…‹/›?”
Итак, теперь я собираюсь показать вам, как решить эту ошибку. И при этом вы узнаете все о React Fragments к концу этого блога.
Если вы внимательно посмотрите на ошибку, она говорит об элементе упаковки. Так. давайте поместим наш тег h1 в div, и вы увидите, что теперь мы получаем ожидаемый результат.
Обернув наши элементы внутри тега div, мы исправили эту проблему. Но есть еще один способ решить эту проблему — React Fragments.
Я поместил свои теги h1 внутрь ‹React.Fragment›. И мы получили свой результат.
Существует один короткий синтаксис для React.Fragment. Краткий синтаксис для React Fragment — это пустой тег, т. е. ‹›‹/›.
Это все о React Fragment. Давайте встретимся снова в моем следующем блоге.
