عرض مصدر React/fragments

<noinclude>{{DISPLAYTITLE:استخدام الأجزاء (Fragments) في React}}</noinclude>
من الأنماط الشائعة في React هي إعادة المكوّن لعناصر متعددة. تتيح لك الأجزاء (Fragments) تجميع قائمة من العناصر الأبناء بدون إضافة عُقَد إضافيّة إلى DOM.<syntaxhighlight lang="javascript">
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

</syntaxhighlight>هناك أيضًا [[React/fragments#.D8.B5.D9.8A.D8.A7.D8.BA.D8.A9 .D9.85.D8.AE.D8.AA.D8.B5.D8.B1.D8.A9|صياغة مختصرة]] جديدة للتصريح عنها، ولكنّها [https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax غير مدعومة من قبل كافة الأدوات الشائعة] حتى الآن.

== البداية ==
من الأنماط الشائعة للمكوّن هي إعادة قائمة من المكونات الأبناء. انظر إلى هذا المثال:<syntaxhighlight lang="javascript">
class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

</syntaxhighlight>سيحتاج المكوّن <code>‎<Columns /></code>‎ إلى إعادة عناصر <code><nowiki><td></nowiki></code> متعددة لكي تكون HTML المُصيَّرة صالحة. إن كان عنصر <code>div</code> الأب مُستخدمًا بداخل التابع <code>render()</code>‎ للمكون ‎<code><Columns /></code>‎ فستكون HTML الناتجة غير صالحة:<syntaxhighlight lang="javascript">
class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>أهلًا</td>
        <td>بالعالم</td>
      </div>
    );
  }
}

</syntaxhighlight>ينتج عنه جدول ‎<code><nowiki><Table /></nowiki></code>‎:<syntaxhighlight lang="javascript">
<table>
  <tr>
    <div>
      <td>أهلًا</td>
      <td>بالعالم</td>
    </div>
  </tr>
</table>

</syntaxhighlight>وبهذا نقدم الأجزاء <code>Fragments</code>.

== الاستخدام ==
<syntaxhighlight lang="javascript">
class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>أهلًا</td>
        <td>بالعالم</td>
      </React.Fragment>
    );
  }
}

</syntaxhighlight>والذي ينتج عنه جدول صحيح <code>‎<nowiki><Table /></nowiki></code>‎:<syntaxhighlight lang="javascript">
<table>
  <tr>
    <td>أهلًا</td>
    <td>بالعالم</td>
  </tr>
</table>

</syntaxhighlight>

== صياغة مختصرة ==
هنالك صياغة جديدة مختصرة أكثر بإمكانك استخدامها للتصريح عن الأجزاء. تبدو هذه الصياغة مثل العناصر الفارغة:<syntaxhighlight lang="javascript">
class Columns extends React.Component {
  render() {
    return (
      <>
        <td>أهلًا</td>
        <td>بالعالم</td>
      </>
    );
  }
}

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

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

== استخدام الأجزاء مع المفاتيح ==
يُمكِن للأجزاء المُصرَّح عنها عن طريق الصياغة <code><React.Fragment></code> أن تمتلك مفاتيح. إحدى حالات الاستخدام لها هي ربط مجموعة إلى مصفوفة من الأجزاء، على سبيل المثال لإنشاء قائمة للوصف:<syntaxhighlight lang="javascript">
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>
  );
}

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

== تجربة المثال ==
بإمكانك تجربة صياغة الأجزاء الجديدة في JSX عن طريق هذا المثال في موقع [https://codepen.io/reactjs/pen/VrEbjE?editors=1000 CodePen].

== انظر أيضًا ==
* [[React/jsx in depth|شرح JSX بالتفصيل]]
* [[React/static type checking|التحقق من الأنواع الثابتة]]
* [[React/typechecking with proptypes|التحقق من الأنواع باستخدام PropTypes]]
* [[React/refs and the dom|استخدام المراجع مع DOM]]
* [[React/uncontrolled components|المكونات غير المضبوطة]]
* [[React/optimizing performance|تحسين الأداء]]
* [[React/react without es6|React بدون ES6]]
* [[React/react without jsx|React بدون JSX]]
* [[React/reconciliation|المطابقة (Reconciliation)]]
* [[React/context|استخدام السياق (Context) في React]]
* [[React/portals|المداخل (Portals) في React]]
* [[React/error boundaries|حدود الأخطاء]]
* [[React/web components|مكونات الويب]]
* [[React/higher order components|المكونات ذات الترتيب الأعلى]]
* [[React/forwarding refs|تمرير المراجع]]
* [[React/render props|خاصيات التصيير]]
* [[React/integrating with other libraries|تكامل React مع المكتبات الأخرى]]
* [[React/accessibility|سهولة الوصول]]
* [[React/code splitting|تقسيم الشيفرة]]
* [[React/strict mode|الوضع الصارم (Strict Mode)]]
== مصادر==
*[https://reactjs.org/docs/fragments.html صفحة استخدام الأجزاء (Fragments) في React في توثيق React الرسمي].
[[تصنيف:React]]
[[تصنيف:React Advanced Guides]]