<Fragment> (<>...</>)
<Fragment>
, sering digunakan melalui sintaksis <>...</>
, memungkinkan Anda mengelompokkan elemen tanpa wrapper node.
<>
<OneChild />
<AnotherChild />
</>
Referensi
<Fragment>
Bungkus elemen-elemen di dalam <Fragment>
untuk mengelompokkan mereka dalam situasi di mana Anda membutuhkan satu elemen. Mengelompokkan elemen di dalam Fragment
tidak akan mempengaruhi hasil pada DOM; elemen-elemen tersebut seolah-olah seperti tidak dikelompokkan. Tag JSX kosong <></>
adalah singkatan untuk <Fragment></Fragment>
dalam banyak kasus.
Props
key
opsional: Fragment yang dideklarasikan dengan sintaksis<Fragment>
eksplisit mungkin memilikikey
.
Caveats
-
Jika Anda ingin mengoper
key
ke Fragment, Anda tidak bisa menggunakan sintaksis<>...</>
. Anda harus secara eksplisit mengimporFragment
dari'react'
dan me-render<Fragment key={yourKey}>...</Fragment>
. -
React tidak akan mengatur ulang state ketika Anda me-render dari
<><Child /></>
ke[<Child />]
atau sebaliknya, atau ketika Anda me-render<><Child /></>
ke<Child />
dan sebaliknya. Ini hanya bekerja dalam satu tingkat kedalaman: contohnya, beralih dari<><><Child /></></>
ke<Child />
akan mengatur ulang state. Lihat semantik yang lebih jelas di sini.
Pengunaan
Menetapkan banyak elemen
Gunakan Fragment
, atau sintaksis <>...</>
, untuk mengelompokkan beberapa elemen menjadi satu. Anda bisa menggunakannya untuk meletakkan banyak elemen di mana saja, di mana 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 sebuah kelompok:
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 peralatan yang disediakan peramban (browser tools), Anda akan melihat semua DOM node <h1>
dan <p>
muncul sebagai saudara (siblings) tanpa pembungkus di sekitar mereka:
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> ); }
Pendalaman
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 mengoper key
ke Fragment
Anda.
Menetapkan banyak elemen ke variabel
Seperti komponen yang lain, Anda bisa menetapkan elemen Fragment ke variabel, dan mengoper 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} />
</>
);
}
Me-render daftar Fragment
Inilah situasi di mana Anda perlu menulis Fragment
secara eksplisit daripada menggunakan sintaksis <></>
. Saat Anda me-render 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-anak (children) Fragment:
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> ); }