كيفية تصدير أكثر من مكون في ملف واحد في React.js؟

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

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

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

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

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

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

export {
	Component1,
	Component2,
	Component3
}

أو

export { Component1, Component2, Component3}

أي لديك تصبح:

export {
  Slide,
  Container,
}

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

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

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