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

<Fragment>, שלרוב משתמשים בה דרך התחביר <>...</>, מאפשרת לקבץ אלמנטים בלי node עוטף.

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

Reference
- <Fragment>
שימוש

Reference

`<Fragment>`

עטפו אלמנטים בתוך <Fragment> כדי לקבץ אותם במצבים שבהם צריך אלמנט יחיד. קיבוץ אלמנטים בתוך Fragment לא משפיע על ה-DOM המתקבל; התוצאה זהה למצב שבו האלמנטים לא קובצו. תגית JSX ריקה <></> היא קיצור של <Fragment></Fragment> ברוב המקרים.

Props

אופציונלי key: Fragments שמוצהרים בתחביר מפורש של <Fragment> יכולים לקבל keys.

Caveats

אם אתם רוצים להעביר key ל-Fragment, אי אפשר להשתמש בתחביר <>...</>. צריך לייבא מפורשות את Fragment מתוך 'react' ולרנדר <Fragment key={yourKey}>...</Fragment>.
React לא מאפסת state כשעוברים מרינדור <><Child /></> ל-[<Child />] או בחזרה, או כשעוברים מרינדור <><Child /></> ל-<Child /> ובחזרה. זה עובד רק לעומק של רמה אחת: למשל, מעבר מ-<><><Child /></></> ל-<Child /> כן מאפס את ה-state. אפשר לראות את הסמנטיקה המדויקת כאן.

שימוש

החזרת כמה אלמנטים

השתמשו ב-Fragment, או בתחביר המקביל <>...</>, כדי לקבץ כמה אלמנטים יחד. אפשר להשתמש בזה כדי לשים כמה אלמנטים בכל מקום שבו אלמנט יחיד יכול להופיע. לדוגמה, קומפוננטה יכולה להחזיר רק אלמנט אחד, אבל בעזרת Fragment אפשר לקבץ כמה אלמנטים ולהחזיר אותם כקבוצה:

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

Fragments שימושיים כי קיבוץ אלמנטים עם Fragment לא משפיע על layout או styles, בניגוד לעיטוף האלמנטים בתוך מיכל נוסף כמו אלמנט DOM. אם תבדקו את הדוגמה בכלי הדפדפן, תראו שכל ה-DOM nodes של <h1> ושל <article> מופיעים כאחים בלי wrappers סביבם:

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

איך לכתוב Fragment בלי התחביר המיוחד?

הדוגמה למעלה שקולה לייבוא Fragment מתוך React:

import { Fragment } from 'react';

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

בדרך כלל לא תצטרכו את זה אלא אם צריך להעביר key ל-Fragment.

השמת כמה אלמנטים למשתנה

כמו כל אלמנט אחר, אפשר לשייך Fragment elements למשתנים, להעביר אותם כ-props וכן הלאה:

function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      Are you sure you want to leave this page?
    </AlertDialog>
  );
}

קיבוץ אלמנטים עם טקסט

אפשר להשתמש ב-Fragment כדי לקבץ טקסט יחד עם קומפוננטות:

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

רינדור רשימת Fragments

זה מצב שבו צריך לכתוב Fragment במפורש במקום תחביר <></>. כש-מרנדרים כמה אלמנטים בלולאה, צריך להקצות key לכל אלמנט. אם האלמנטים בלולאה הם Fragments, חייבים להשתמש בתחביר JSX רגיל כדי לספק את המאפיין key:

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

אפשר לבדוק ב-DOM שאין אלמנטים עוטפים סביב ילדי ה-Fragment:

Fork

import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

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>
  );
}

Previousקומפוננטות

Next<Profiler>