Fragment ב-React: <>...</> מול <Fragment> עם דוגמאות

Fragment ב-React מאפשר לקומפוננטה להחזיר כמה אלמנטים בלי לעטוף אותם ב-<div> נוסף. כתבו <> לפני האלמנט הראשון ו-</> אחרי האחרון, ו-React מכניסה את האלמנטים ישר לתוך ההורה, בלי צומת משלה בדף.

function Greeting({ name }) {
    return (
        <>
            <h2 style={{ margin: 0 }}>Hello, {name}</h2>
            <p style={{ marginTop: 4 }}>You have 3 new messages.</p>
        </>
    );
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Linus" />
        </div>
    );
}

כל Greeting מחזירה כותרת ופסקה זו לצד זו. מחקו את השורות <> ו-</> והתצוגה המקדימה תציג במקום זאת שגיאת build, כי הפונקציה מנסה עכשיו להחזיר שני ערכים.

למה קומפוננטה צריכה שורש אחד

JSX הוא דרך נעימה יותר לכתוב קריאות לפונקציות. <h2>Hi</h2> מתקמפל בערך ל-jsx('h2', { children: 'Hi' }), ביטוי אחד. משפט return יכול להחזיר ערך אחד, ולכן שתי תגיות אחיות בלי כלום מסביבן הן כמו לכתוב return a b: הקומפיילר עוצר עם "Adjacent JSX elements must be wrapped in an enclosing tag".

לפני שהיו fragments, הפתרון היה <div> עוטף. זה עובד, אבל ה-div הוא אלמנט אמיתי. הוא מופיע ב-DOM, משתתף ב-layout של CSS, וחלק מההורים לא מקבלים אותו כילד בכלל. fragment מקיים את כלל השורש האחד ואז נעלם.

אפשר לראות שהוא לא מוסיף כלום. הדוגמה שמתחת מרנדרת את אותם שני פריטים דרך fragment ודרך div, ואז סופרת את הילדים הישירים של כל מכל.

import { useEffect, useRef } from 'react';

function WithFragment() {
    return (
        <>
            <span>A</span>
            <span>B</span>
        </>
    );
}

function WithDiv() {
    return (
        <div>
            <span>A</span>
            <span>B</span>
        </div>
    );
}

export default function App() {
    const first = useRef(null);
    const second = useRef(null);

    useEffect(() => {
        console.log('fragment box children:', first.current.children.length);
        console.log('div box children:', second.current.children.length);
    }, []);

    return (
        <div>
            <div ref={first}><WithFragment /></div>
            <div ref={second}><WithDiv /></div>
        </div>
    );
}

הקונסול מדפיס 2 עבור ה-fragment, שני ה-spans, ו-1 עבור ה-div, שעוטף אותם. במכל flex או grid ההבדל הזה קובע אם ה-spans מסודרים כפריטים נפרדים או נארזים לפריט אחד.

התחביר הקצר והקומפוננטה Fragment

יש שתי דרכים לכתוב fragment, ושתיהן מתקמפלות לאותו דבר:

import { Fragment } from 'react';

// Short syntax, no import needed
<>
    <dt>React</dt>
    <dd>A library for building user interfaces</dd>
</>

// Long form
<Fragment>
    <dt>React</dt>
    <dd>A library for building user interfaces</dd>
</Fragment>

השתמשו ב-<>...</> כמעט בכל מקום. פנו ל-<Fragment> במקרה אחד: כשה-fragment צריך key. התחביר הקצר לא יכול לקבל מאפיינים, ולכן <key={id}> הוא לא JSX תקין. אולי תראו גם <React.Fragment> בקוד ישן; זו אותה קומפוננטה, דרך ה-import של React כברירת מחדל.

fragments עם key ברשימות

כשמרנדרים רשימה עם map, כל פריט צריך key כדי ש-React תוכל לעקוב אחריו בין רינדורים (הדף על רשימות ו-keys מסביר למה). אם כל פריט הוא קבוצה של אלמנטים ולא אלמנט אחד, ה-key הולך על ה-fragment, ולכן צריך את הצורה הארוכה.

רשימת הגדרות היא המקרה הקלאסי: כל רשומה היא <dt> ו-<dd>, ו-<dl> צריך להכיל אותם ישירות.

import { Fragment, useState } from 'react';

const initialTerms = [
    { id: 1, term: 'Component', meaning: 'A function that returns UI.' },
    { id: 2, term: 'Prop', meaning: 'An input a parent passes to a component.' },
    { id: 3, term: 'State', meaning: 'Data a component remembers between renders.' },
];

export default function App() {
    const [terms, setTerms] = useState(initialTerms);

    return (
        <div>
            <dl>
                {terms.map((t) => (
                    <Fragment key={t.id}>
                        <dt style={{ fontWeight: 600 }}>{t.term}</dt>
                        <dd style={{ marginBottom: 8 }}>{t.meaning}</dd>
                    </Fragment>
                ))}
            </dl>
            <button onClick={() => setTerms([...terms].reverse())}>Reverse</button>
        </div>
    );
}

לחצו על Reverse והזוגות מחליפים מקומות כיחידות שלמות, כי לכל זוג יש key משלו. גם <div> שעוטף כל זוג היה יכול לקבל key, והוא HTML תקין בתוך dl, אבל הוא מוסיף ל-markup רמה שלישית ש-fragment חוסך.

fragments בתוך טבלאות

בטבלאות עטיפה מיותרת כואבת הכי הרבה. <tr> מצפה לתאי <td> ו-<th> כילדים ישירים. אם קומפוננטה שמחזירה כמה תאים עוטפת אותם ב-<div>, הדפדפן מתייחס ל-div כאל תא מוזר אחד, והתאים שבתוכו מפסיקים להתיישר עם הכותרת.

const cell = { border: '1px solid #ccc', padding: '4px 8px' };

function CellsInDiv() {
    return (
        <div>
            <td style={cell}>$4</td>
            <td style={cell}>In stock</td>
        </div>
    );
}

function CellsInFragment() {
    return (
        <>
            <td style={cell}>$4</td>
            <td style={cell}>In stock</td>
        </>
    );
}

export default function App() {
    return (
        <table style={{ borderCollapse: 'collapse' }}>
            <thead>
                <tr>
                    <th style={cell}>Item</th>
                    <th style={cell}>Price</th>
                    <th style={cell}>Stock</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style={cell}>Pen (div)</td>
                    <CellsInDiv />
                </tr>
                <tr>
                    <td style={cell}>Pen (fragment)</td>
                    <CellsInFragment />
                </tr>
            </tbody>
        </table>
    );
}

בשורת ה-fragment המחיר נמצא מתחת ל-Price והמלאי מתחת ל-Stock. בשורת ה-div שני התאים דחוסים לעמודת Price ועמודת Stock ריקה. בפיתוח React גם רושמת אזהרה ש-<div> לא יכול להיות ילד של <tr>; התצוגה המקדימה רצה כמו build של פרודקשן, אז היא מדלגת על הבדיקה הזו, ומה שרואים כאן הוא ה-layout השבור. עם רינדור בצד השרת אותה טעות יכולה לגרום גם לשגיאות hydration, כי ה-parser של ה-HTML בדפדפן מזיז את ה-div שלא במקומו.

אותו כלל חל על <ul> ו-<ol>, שצריכים להכיל אלמנטי <li>, ועל <select>, שצריך להכיל אלמנטי <option>. בכל פעם שקומפוננטה מחזירה חלקים ששייכים ישירות לתוך הורה כזה, החזירו fragment.

fragments או מערכים

קומפוננטה יכולה גם להחזיר מערך של אלמנטים, ו-React מרנדרת אותם לפי הסדר כמו fragment. כל אלמנט במערך מוחזר צריך key משלו, בדיוק כמו הפלט של map, כי React מתייחסת למערך כרשימה:

function Cells() {
    return [<td key="price">$4</td>, <td key="stock">In stock</td>];
}

זה עובד, אבל זה רועש יותר: פסיקים בין אלמנטים, key על כל אחד, וסוגר מרובע שקל לפספס כשה-markup גדל. השתמשו ב-fragment לקבוצה קבועה של אלמנטים, ושמרו מערכים למה שהם באופן טבעי, התוצאה של מעבר על נתונים.

מה fragment לא יכול לעשות

מכיוון ש-fragment לא מרנדר אלמנט, אין לו איפה לשים class, סגנון, event handler או ref. <Fragment className="row"> לא עושה שום דבר מועיל, וה-prop היחיד ש-React קוראת מ-fragment הוא key. כשצריך לעצב את הקבוצה או להאזין ללחיצות עליה, צריך בכל זאת אלמנט אמיתי, וזה בסדר: בחרו אחד שתקין במקום שבו הוא נמצא, כמו <tbody> לקיבוץ שורות או <li> שמחזיק פריט ברשימה.

fragment עובד בכל מקום שבו אלמנט עובד, כולל בתוך רינדור מותנה: {show && <>...</>} מציג או מסתיר את כל הקבוצה בבת אחת.