Когда использовать React.Fragments?

Question

Когда использовать React.Fragments?

Я только что узнал о React Fragments.

Я понимаю, что фрагменты немного более эффективны за счет создания меньшего количества узлов дерева и делают его чище при взгляде на инспектор, но тогда зачем нам когда-либо использовать его в качестве контейнеров в компонентах React? Должны ли мы всегда использовать React.Fragments в наших компонентах?

Будет ли использование фрагментов усложнять стилизацию? (Я не уверен, поскольку я еще не попробовал это непосредственно).

17

javascript reactjs react-fragment

Источник

user9505524 16 мар '18 в 23:13

3 ответа

Другие вопросы по тегам javascript reactjs react-fragment

user3110146 01 авг '18 в 07:57 2018-08-01 07:57 · Answer 1 · 2018-08-01 07:57

В большинстве распространенных практик React позволяет отображать только один элемент <>. Если вы хотите визуализировать несколько элементов, вы можете окружить их <div></div> или же <span></span>,

Пример ситуации с фрагментами. Одним из наиболее важных применений фрагментов является <tbody> тег (как указано в примере фрагмента официального сайта), в ситуации, когда вы хотите сделать несколько <tr/> строки в элементе, вы можете обнаружить, что их нельзя обернуть <div>, так как внутри тега вы можете иметь только <tr/> элемент!

Что ж, в другой ситуации я рекомендую всегда использовать одноэлементный рендер, если это не нужно.

user15957483 02 янв '22 в 09:09 2022-01-02 09:09 · Answer 2 · 2022-01-02 09:09

Вы можете использовать React.fragmentsкогда тебе нужен реквизит, например, <React.fragments key={1}><\React.fragments>. Если вам не нужны реквизиты, вы можете использовать <> <\>.

1

Источник

user15957483 02 янв '22 в 09:09

user7211248 08 янв '21 в 16:13 2021-01-08 16:13 · Answer 3 · 2021-01-08 16:13

С использованием <></>это просто плохая практика ИМО.

Я рекомендую использовать только <div></div>когда вам требуется , чтобы дети были помещены внутри родительского элемента. В противном случае это бессмысленный/лишний html, который просто не требуется.

Например, у нас есть имя класса, связанное с элементом Div.

      <body>
  <div classname="people-group-1">
    <h1>Hello Shippers</h1>
    <h1>Hello Matey</h1>
    <h1>Hello Pal</h1>
  </div>
  <div classname="people-group-2">
    <h1>Hello Mucka</h1>
    <h1>Hello Geeza</h1>
    <h1>Hello Dude</h1>
  </div>
</body>

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

      <body>
  <div>
    <h1>Hello Shippers</h1>
    <h1>Hello Matey</h1>
    <h1>Hello Pal</h1>
  </div>
  <div>
    <h1>Hello Mucka</h1>
    <h1>Hello Geeza</h1>
    <h1>Hello Dude</h1>
  </div>
</body>

<!-- No different to--->

<body>
 <h1>Hello Shippers</h1>
 <h1>Hello Matey</h1>
 <h1>Hello Pal</h1>
 <h1>Hello Mucka</h1>
 <h1>Hello Geeza</h1>
 <h1>Hello Dude</h1>
</body>

Если вам нужно вернуть несколько элементов, которым не нужен родитель, вы можете использовать этот подход.

      import React, { Fragment } from 'react'

const names = ['Shippers', 'Matey', 'Pal', 'Mucka', 'Geeza', 'Dude']

export const Headers = () => (
  <Fragment>{names.map(name => <h1>{`Hello ${name}`}</h1>)}</Fragment>
)

Затем вы можете импортировать его в рендерер где угодно.

      import React from 'react'
import { Headers } from './Headers'

export const Body = () (
  <body>
    <Headers />
  </body>
)

Это транспилируется в

      <body>
 <h1>Hello Shippers</h1>
 <h1>Hello Matey</h1>
 <h1>Hello Pal</h1>
 <h1>Hello Mucka</h1>
 <h1>Hello Geeza</h1>
 <h1>Hello Dude</h1>
</body>