تجميع العناصر عبر Fragment | قواعد كتابة JSX وتجميع العناصر عبر Fragment

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

قد يفي وضع غلاف <div> بالغرض أحياناً، لكن إقحام <div> زائد بين خلايا الجداول أو قوائم التعريف <dl> أو عناصر شبكات Flexbox وGrid يفسد دلالة الصفحة ويكسر توزيع الأعمدة فوراً!

تعالج React هذه المشكلة بأناقة عبر مكون التجميع Fragment؛ إذ تستخدم الصيغة المختصرة <>...</> أو الصيغة الصريحة <Fragment> لتجميع العناصر المتجاورة دون إضافة أي عقدة زائدة في شجرة المتصفح.

الصف 2 صورة توضيحية

مقارنة بصرية بين تلوث شجرة DOM بغلاف div زائد وبين التجميع النقي عبر Fragment دون عقد إضافية

الصف 3 كود برمجي

HTML

function TermPair() {
  return (
    <>
      <dt><strong>Fragment</strong></dt>
      <dd>Zero extra DOM wrapper node.</dd>
    </>
  );
}

function GlossaryCard() {
  return <dl className="rx-card"><TermPair /></dl>;
}

جرّب بنفسك

الصف 4 ملاحظة هامة

Grouping with React Fragments تجميع العناصر عبر Fragment

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (قواعد كتابة JSX وتجميع العناصر عبر Fragment)