استيراد وتصدير المكونات

تكمن سحر المكونات في إمكانية إعادة استخدامها: يمكنك إنشاء مكونات تتكون من مكونات أخرى. ولكن مع تداخل المزيد والمزيد من المكونات، غالبًا ما يكون من المنطقي البدء في تقسيمها إلى ملفات مختلفة. وهذا يتيح لك الحفاظ على ملفاتك سهلة المسح وإعادة استخدام المكونات في أماكن أكثر.

ملف المكون الجذري

فيمكونك الأول، قمت بإنشاء مكونProfile ومكون Galleryالذي يعرضه:

هذه المكونات موجودة حاليًا فيملف مكون جذري،يُسمىApp.jsفي هذا المثال. اعتمادًا على إعدادك، قد يكون مكونك الجذري في ملف آخر. إذا كنت تستخدم إطار عمل يعتمد على التوجيه القائم على الملفات، مثل Next.js، فسيكون مكونك الجذري مختلفًا لكل صفحة.

تصدير واستيراد مكون

ماذا لو أردت تغيير شاشة الوصول في المستقبل ووضع قائمة بكتب العلوم هناك؟ أو نقل جميع الملفات الشخصية إلى مكان آخر؟ من المنطقي نقلGallery و Profileخارج ملف المكون الجذري. وهذا سيجعلهما أكثر نمطية وإمكانية لإعادة الاستخدام في ملفات أخرى. يمكنك نقل مكون في ثلاث خطوات:

1. أنشئملف JS جديدًا لوضع المكونات فيه.
2. صدّرمكون الدالة الخاص بك من ذلك الملف (باستخدام عمليات التصديرالافتراضيةأوالمسمّاة).
3. استوردالمكون في الملف حيث ستستخدمه (باستخدام التقنية المناسبة لاستيراد عمليات التصديرالافتراضيةأوالمسمّاة).

هنا تم نقل كل منProfile و Gallery خارج App.jsإلى ملف جديد يُسمىGallery.js. الآن يمكنك تغييرApp.jsلاستيرادGalleryمنGallery.js:

لاحظ كيف تم تقسيم هذا المثال إلى ملفي مكونين الآن:

1. Gallery.js:
   • يُعرّف مكونProfileوالذي يُستخدم فقط داخل نفس الملف ولا يتم تصديره.
   • يُصدّر مكونGallery كـ تصدير افتراضي.
2. App.js:
   • يستوردGalleryكـاستيراد افتراضيمنGallery.js.
   • يُصدّر مكون الجذرApp كـ تصدير افتراضي.

تصدير واستيراد مكونات متعددة من نفس الملف

ماذا لو أردت عرض مكونProfileواحد فقط بدلاً من معرض؟ يمكنك أيضًا تصدير مكونProfile. لكن Gallery.jsيحتوي بالفعل علىتصدير افتراضي، ولا يمكن أن يكون لديكتصديرين افتراضيين. يمكنك إنشاء ملف جديد بتصدير افتراضي، أو يمكنك إضافةتصدير مُسمى لـ Profile.يمكن أن يحتوي الملف على تصدير افتراضي واحد فقط، ولكن يمكن أن يحتوي على العديد من التصديرات المُسماة!

أولاً،صدّرProfileمنGallery.jsباستخدام تصدير مُسمى (بدون كلمةdefault):

ثم،استوردProfileمنGallery.jsإلىApp.jsباستخدام استيراد مسمى (باستخدام الأقواس المعقوفة):

أخيرًا،اعرض<Profile />من مكونApp:

الآن يحتويGallery.jsعلى تصديرين: تصدير افتراضيGalleryوتصدير مسمىProfile. App.jsيستورد كليهما. جرب تعديل<Profile />إلى<Gallery />والعودة في هذا المثال:

أنت الآن تستخدم مزيجًا من التصديرات الافتراضية والمسمّاة:

• Gallery.js:
  • يصدّر مكونProfile كـ تصدير مسمى باسمProfile.
  • يصدّر مكونGallery كـ تصدير افتراضي.
• App.js:
  • يستوردProfileكـاستيراد مسمى باسمProfileمنGallery.js.
  • يستوردGalleryكـاستيراد افتراضيمنGallery.js.
  • يصدّر مكون الجذرApp كـ تصدير افتراضي.

ملخص

في هذه الصفحة تعلمت:

• ما هو ملف مكون الجذر
• كيفية استيراد وتصدير مكون
• متى وكيف تستخدم الاستيرادات والتصديرات الافتراضية والمسمّاة
• كيفية تصدير عدة مكونات من نفس الملف