الفرق بين المراجعتين ل"React/fragments"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:استخدام الأجزاء (Fragments) في React}}</noinclude>')
 
(تحديث)
 
(4 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:استخدام الأجزاء (Fragments) في React}}</noinclude>
 
<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|صياغة مختصرة]] جديدة للتصريح عنها.
 +
 +
== البداية ==
 +
من الأنماط الشائعة للمكوّن هي إعادة قائمة من المكونات الأبناء. انظر إلى هذا المثال:<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> أن تمتلك مفاتيح. إحدى حالات الاستخدام لها هي ربط مجموعة إلى مصفوفة من الأجزاء، على سبيل المثال لإنشاء قائمة للوصف:<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]]

المراجعة الحالية بتاريخ 18:25، 3 نوفمبر 2020

من الأنماط الشائعة في 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> أن تمتلك مفاتيح. إحدى حالات الاستخدام لها هي ربط مجموعة إلى مصفوفة من الأجزاء، على سبيل المثال لإنشاء قائمة للوصف:

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.

انظر أيضًا

 مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=React/fragments&oldid=29815"