React/fragments

من الأنماط الشائعة في React هي إعادة المكوّن لعناصر متعددة. تتيح لك الأجزاء (Fragments) تجميع قائمة من العناصر الأبناء بدون إضافة عُقَد إضافيّة إلى DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

هناك أيضًا صياغة مختصرة جديدة للتصريح عنها، ولكنّها غير مدعومة من قبل كافة الأدوات الشائعة حتى الآن.

البداية

من الأنماط الشائعة للمكوّن هي إعادة قائمة من المكونات الأبناء. انظر إلى هذا المثال:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

سيحتاج المكوّن ‎<Columns />‎ إلى إعادة عناصر <td> متعددة لكي تكون HTML المُصيَّرة صالحة. إن كان عنصر div الأب مُستخدمًا بداخل التابع render()‎ للمكون ‎<Columns />‎ فستكون HTML الناتجة غير صالحة:

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>أهلًا</td>
        <td>بالعالم</td>
      </div>
    );
  }
}

ينتج عنه جدول ‎<Table />‎:

<table>
  <tr>
    <div>
      <td>أهلًا</td>
      <td>بالعالم</td>
    </div>
  </tr>
</table>

وبهذا نقدم الأجزاء Fragments.

الاستخدام

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>أهلًا</td>
        <td>بالعالم</td>
      </React.Fragment>
    );
  }
}

والذي ينتج عنه جدول صحيح ‎<Table />‎:

<table>
  <tr>
    <td>أهلًا</td>
    <td>بالعالم</td>
  </tr>
</table>

صياغة مختصرة

هنالك صياغة جديدة مختصرة أكثر بإمكانك استخدامها للتصريح عن الأجزاء. تبدو هذه الصياغة مثل العناصر الفارغة:

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>أهلًا</td>
        <td>بالعالم</td>
      </>
    );
  }
}

بإمكانك استخدام <></> بنفس الطريقة التي تستخدم بها أي عنصر آخر عدا أنها لا تدعم المفاتيح أو الخاصيّات.

لاحظ أنّ العديد من الأدوات لا تدعمها حتى الآن لذا قد تحتاج إلى أن تكتب بصراحة <React.Fragment> حتى تصبح الأدوات تدعم الصياغة المختصرة.

استخدام الأجزاء مع المفاتيح

يُمكِن للأجزاء المُصرَّح عنها عن طريق الصياغة <React.Fragment> أن تمتلك مفاتيح. إحدى حالات الاستخدام لها هي ربط مجموعة إلى مصفوفة من الأجزاء، على سبيل المثال لإنشاء قائمة للوصف:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
		// بدون وجود مفتاح ستطلق React تحذيرًا
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

الخاصية الوحيدة التي يمكن تمريرها للأجزاء هي المفتاح key. قد نُضيف مستقبلًا دعم لخاصيّات إضافية مثل مُعالجات الأحداث.

تجربة المثال

بإمكانك تجربة صياغة الأجزاء الجديدة في JSX عن طريق هذا المثال في موقع CodePen.

انظر أيضًا

• شرح JSX بالتفصيل
• التحقق من الأنواع الثابتة
• التحقق من الأنواع باستخدام PropTypes
• استخدام المراجع مع DOM
• المكونات غير المضبوطة
• تحسين الأداء
• React بدون ES6
• React بدون JSX
• المطابقة (Reconciliation)
• استخدام السياق (Context) في React
• استخدام الأجزاء (Fragments) في React (الصفحة الحالية)
• المداخل (Portals) في React
• حدود الأخطاء
• مكونات الويب
• المكونات ذات الترتيب الأعلى
• تمرير المراجع
• خاصيات التصيير
• تكامل React مع المكتبات الأخرى
• سهولة الوصول
• تقسيم الشيفرة
• الوضع الصارم (Strict Mode)

 مصادر

• صفحة استخدام الأجزاء (Fragments) في React في توثيق React الرسمي.