<Fragment> (<>...</>)

<Fragment>, atau sering digunakan melalui sintaksis <>...</>, memungkinkan Anda mengelompokkan elemen tanpa pembungkus node.

<>
  <OneChild />
  <AnotherChild />
</>

Referensi
- <Fragment>
Pengunaan

Referensi

`<Fragment>`

Bungkus elemen di dalam <Fragment> untuk mengelompokkan elemen di situasi dimana Anda membutuhkan satu elemen. Mengelompokkan element di dalam Fragment tidak akan mempengaruhi hasil pada DOM; Hal ini sama dengan tidak mengelompokkan elemen. Tag JSX kosong <></> adalah singkatan untuk <Fragment></Fragment> dalam banyak kasus.

Props

opsional key: Fragment yang dideklarasi dengan eksplisit sintaksis <Fragment> mungkin memiliki key.

Peringatan

Jika Anda ingin oper key ke Fragment, Anda tidak bisa menggunakan sintaksis <>...</>. Anda harus secara eksplisit mengimpor Fragment dari 'react' dan render <Fragment key={yourKey}>...</Fragment>.
React tidak akan mengatur ulang state ketika Anda rendering dari <><Child /></> ke [<Child />] atau sebaliknya, atau ketika Anda rendering <><Child /></> ke <Child /> dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari <><><Child /></></> ke <Child /> akan mengatur ulang state. Lihat semantik yang lebih jelas disini.

Pengunaan

Mengembalikan banyak elemen

Gunakan Fragment, atau sintaksis <>...</>, untuk mengelompokkan beberapa elemen menjadi satu. Anda bisa menggunakannya untuk meletakkan banyak elemen dimana saja, dimana satu elemen itu bisa muncul. Misalnya, komponen hanya bisa mengembalikan satu elemen, tetapi dengan menggunakan Fragment, Anda dapat mengelompokkan beberapa elemen menjadi satu dan kemudian mengembalikannya sebagai grup:

function Post() {
  return (
    <>
      <PostTitle />
      <PostBody />
    </>
  );
}

Fragment sangat berguna karena mengelompokkan elemen dengan Fragment tidak akan mempengaruhi layout atau style, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan alat browser, Anda akan melihat semua DOM node <h1> dan <p> muncul sebagai saudara tanpa pembungkus di sekitar mereka:

Fork

export default function Blog() {
  return (
    <>
      <Post title="An update" body="It's been a while since I posted..." />
      <Post title="My new blog" body="I am starting a new blog!" />
    </>
  )
}

function Post({ title, body }) {
  return (
    <>
      <PostTitle title={title} />
      <PostBody body={body} />
    </>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

Deep Dive

Bagaimana menulis Fragment tanpa spesial sintaksis?

Contoh di atas sama dengan mengimpor Fragment dari React:

import { Fragment } from 'react';

function Post() {
  return (
    <Fragment>
      <PostTitle />
      <PostBody />
    </Fragment>
  );
}

Biasanya Anda tidak memerlukan cara ini kecuali Anda perlu oper key ke Fragment Anda.

Menentukan banyak elemen ke variabel

Seperti komponen yang lain, Anda bisa menentukan elemen Fragment ke variabel, dan oper mereka sebagai props, dan seterusnya:

function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      Apakah anda yakin untuk meninggalkan halaman ini?
    </AlertDialog>
  );
}

Mengelompokkan elemen dengan teks

Anda bisa mengunakan Fragment untuk mengelompokkan teks dengan komponen:

function DateRangePicker({ start, end }) {
  return (
    <>
      Dari
      <DatePicker date={start} />
      Ke
      <DatePicker date={end} />
    </>
  );
}

Merender daftar Fragment

Inilah situasi di mana Anda perlu menulis Fragment secara eksplisit daripada menggunakan sintaksis <></>. Saat Anda merender beberapa elemen dalam loop, Anda perlu menetapkan key untuk setiap elemen. Jika elemen dalam loop adalah Fragment, Anda perlu menggunakan sintaksis elemen JSX normal untuk menyediakan atribut key:

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

Anda bisa memeriksa DOM untuk memastikan bahwa tidak ada elemen pembungkus di sekitar anak Fragment:

Fork

import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'Sebuah pembaharuan', body: "Sudah lama tidak posting..." },
  { id: 2, title: 'Blog baru saya', body: 'Saya memulai blog baru!' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

PreviousComponents Next<Profiler>