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

السؤال

نشر

أحاول أن أقوم بعمل أكثر من مكون في ملف واحد، وقمت بكتابة هذا الكود بالشكل التالي:

function Container() {
    return (
        <div>
            <Slide />
            <Slide />
            <Slide />
        </div>
    );
}
export default Container;

function Slide() {
    return (
        <div>
          Some Text Content
        </div>
    );
}
export default Slide;

ولكن يظهر خطأ Syntax Error في هذا الملف، لماذا يظهر خطأ في هذا الملف، بالرغم من أنه يعمل إن وضعت كل مكون في ملف منفصل؟

Recommended Posts

  • 1
نشر (معدل)

لا يمكنك القيام بأكثر من export default واحد في كل module، يمكنك القيام بأنماط أخرى من ال export مثل ال named export عوضاً عن ذلك.

أي يمكن تعديل الكود الخاص بك بالشكل التالي:

export function Container() {
    return (
        <div>
            <Slide />
            <Slide />
            <Slide />
        </div>
    );
}

export function Slide() {
    return (
        <div>
          Some Text Content
        </div>
    );
}

 

تم التعديل في بواسطة Kais Hasan
  • 2
نشر (معدل)

إذا كنت تسعى لوضع component فرعي مع رئيسي فلست بحاجة لتصدير الفرعي ولا يمكن ذلك بالأصل. في المثال الذي وضعته تستطيع فقط تصدير Container وأستعمال Slide بداخله أو بالعكس طالما أنهما داخل نفس الملف. على أية حال لا يتعبر هذا الإجراء محبذاً حيث أن الأفضل دائماً فصل المكونات في ملفات منفصلة لضمان سهولة تعديلها أو حذفها وتصحيح الأخطاء خلال التطوير.

 export default تعني أن الcomponent الذي تصدره هو المفترض الذي ستقوم بإستيراده في ملف أخر بواسطة import

	import X from './x.jsx'
	// X المطلوب إستيراده
	// './x.jsx' مسار الملف  
	

تم التعديل في بواسطة علي محسن
  • 1
نشر

يمكن تصدير كل مكون بنفسه كما الإجابة السابقة، أو تصدير عدة مكونات بتعليمة واحدة مع تجميع هذه المكونات

يمكن تصدير مكون أو أكثر بالشكل  named export التالي:

export {
	Component1,
	Component2,
	Component3
}

أو

export { Component1, Component2, Component3}

أي لديك تصبح:

export {
  Slide,
  Container,
}

 

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...