Как React Fragment улучшает макет?

Это официальное руководство Next.js, макет

export default function Layout({ children }) {
  return <div>{children}</div>
}

Я смотрю на одно репо с макетом

import { Component, Fragment } from 'react'

const Layout = ({ children }) => {
    return (
        <React.Fragment>
            <p>header</p>
            {children}
            <p>footer</p>
        </React.Fragment>
    );
};

export default Layout;

Каковы плюсы и минусы React Fragments?

Если вы используете Fragment, HTML-тег не будет отображаться.

— 22.12.2020 14:28

reactjs

22.12.2020 13:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

235

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Любой компонент должен возвращать один элемент. Есть три элемента:

<p>header</p> //1
{children}    //2 +
<p>footer</p> //3

Таким образом, они будут обёрнуты каким-либо тегом (div, main и т.д.):

<div>
    <p>header</p>
    {children}
    <p>footer</p>
</div>

отображается как:

 <body>
    <div>
      <p>header</p>
      <p>first paragraph</p>
      <p>second paragraph</p>
      <p>footer</p>
    <div>
 </body>

С фрагментом (вы можете использовать <> или <React.Fragment>):

<>
   <p>header</p>
   {children}
   <p>footer</p>
</>

отображается как:

 <body>
      <p>header</p>
      <p>first paragraph</p>
      <p>second paragraph</p>
      <p>footer</p>
 </body>

Также удобно использовать Fragment в таблицах, когда у вас в качестве компонента одна строка — вы не нарушите разметку.

Под капотом JSX превращается в такой код:

"use strict";

const layout = ({
  children
}) => {
  return React.createElement(
             "div", // HTML tag name or React.Fragment
              null, // Props or attributes (for div)
              React.createElement("p", null, "header"), // 1th children of div
              children,                                 // 2nd children of div
              React.createElement("p", null, "footer")  // 3rd children of div
        );
};

Как видите, React.createElement() получает три параметра, первый из них — это корень HTML tag или Fragment, вместо которого будет помещено его содержимое. В отличие от HTML tags, Fragment может иметь только атрибут key (который также используется только React)

22.12.2020 14:54

Другие вопросы по теме

Как я могу протестировать событие click, которое изменяет состояние useState с помощью фермента?

Не удается прочитать свойство «путь» неопределенного при загрузке изображения на внешний интерфейс (реагировать)

Реагировать. Запускать функцию внутри onChange, только если прошло N времени без onChange

Изменить класс в зависимости от ответа API

Ошибка: слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл. Не удалось найти код, вызывающий это

Безопасно ли передавать JWT дочерним компонентам React?

Как защитить маршрут от пользователя до доступа без оплаты?

Переход работает только в одном направлении

Как использовать startWith с отправкой формы при фильтрации данных массива из API в React?

Как получить параметр после хеша (#) с помощью React Router и хука useParams?

Как React Fragment улучшает макет?

Ответы 1

Другие вопросы по теме

Похожие вопросы