اذهب إلى المحتوى
  • 0

ما هو العنصر الفارغ <> في react.js؟

Adam Ebrahim

السؤال

أتعلم أستخدام React وفي الفيديو التعليمي إستخدم المدرب العنصر <> </>  في الكود التالي:

class Component extends Component {
  render() {
    return <> <Post/> <Post/> </>
  }
}

ولا أعرف ما غائدة هذا العنصر، وعندما أقوم بإزالته يظهر لي هذا الخطأ

multiple components must wrapt with end

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يستخدم الوسم الفارغ  <> </> إختصاراً ل fragment الخاصية التي تمكنك من إضافة أكثر من عنصر بدون الحاجة لوضعهم بداخل عنصر واحد كالتالي

render() {
  return (
    <React.Fragment>
      <header />
      <main />
      <footer />
    </React.Fragment>
  );
}
//إختصاراً سنقوم بكتابة التالي
render() {
  return (
    <> 
		<header />
        <main />
        <footer />
    </>
  );
}

بينما إذا أردت تطبيق الكود بالأعلى بدون  <> </> سيظهر لك خطأ وستضطر لوضع ال header وال main و  ال footer بداخل عنصر واحد كالتالي

render() {
  return (
    <div> 
		<header />
        <main />
        <footer />
    </div>
  );
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

هذا كود مختصر للعنصر Fragment

return <React.Fragment> <Post/> <Post/> </React.Fragment>

// هذا كود مختصر للسطر السابق
return <> <Post/> <Post/> </>

يعتمد React على بناء هيكل الصفحة يشبه الشجرة ويستخدم العنصر Fragment عند إرجاع مكونات متعددة، فإن افتراض أن هذه الشجرة من العناصر سيكون لها عنصر جذر واحد (عنصر رئيسي) فإنه سيكون من الصعب معالجة هذه الشجرة من المكونات.

لذلك يجب أن يتم إرجاع عنصر واحد فقط ولحل هذه المشكلة يتم إستخدام العنصر React.Fragment لإحتواء كل العناصر الأخرى المرجعة، وهكذا يتم إرجاع عنصر واحد فقط.

لاحظ أنه من الإصدار 16.2 في React يمكن إرجاع مصفوفة Array من العناصر بدلًا من إستخدام العنصر React.Fragment بهذا الشكل:

return[
    <div> Div 1</div>,
    <div> Div 2</div>,
    <div> Div 3</div>,
    <div> Div 4</div>
  ];

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

كما تشير مستندات React.js ، فإن النمط الشائع في React هو أن تعيد المكونات عناصر متعددة. عادة ما يتم تغليف هذه العناصر على سبيل المثال داخل div. في معظم الحالات ، يكون الغلاف div "غير ذي صلة" ويتم إضافته فقط لأن مكونات React تتطلب منك إرجاع عنصر واحد فقط. ينتج عن هذا النوع من السلوك ترميز عديم الفائدة وأحيانًا يتم عرض HTML غير صالح ، وهو أمر سيء.

على سبيل المثال ، يمكن أن يكون لدينا جدول مكون يعرض جدول HTML وداخل هذا الجدول يتم تقديم الأعمدة بمكون آخر يسمى الأعمدة. من المحتمل أن يبدو شيء من هذا القبيل.

function Table(){
 return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );

}
 function Columns(){
 return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
}

قد يؤدي هذا إلى عرض HTML غير صالح لأن الغلاف div من مكون الأعمدة يتم عرضه داخل <tr>.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

الحل لهذا هو Fragment React  فهو يتيح تجميع قائمة من العناصر الفرعية دون إضافة عقد إضافية إلى DOM لأن الأجزاء لا تُعرض على DOM. لذلك نستخدم React.Fragment بشكل أساسي حيث نستخدم عادةً غلاف div.

function Columns(){
 return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
}

الآن سيعرض مكون الجدول HTML التالي:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مرحباً @Adam Ebrahim
لنأخذ الموضوع ببساطة . هذا العنصر يسمى Fragment وهو عنصر خاص ب React ( وظيفته الأساسية هو أن يكون حاوية لجميع العناصر بداخله ) وإذا لاحظت ستجده شبيه بال div في ال html حيث أن العنصر لا معنى له مثل ( aside - header ) وهكذا 
في ماذا يختلف عن ال div ؟ الإختلاف هو أنه لا يقبل أي تنسيقات 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...