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

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

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

הפניה
- <Fragment>
שימוש

הפניה

`<Fragment>`

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

אבזרים

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

אזהרות

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

שימוש

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

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

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

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

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 אלמנטים למשתנים, להעביר אותם כ-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>