استيراد وتصدير المكونات
سحر المكونات يكمن في إمكانية إعادة استخدامها: يمكنك إنشاء مكونات تتكون من مكونات أخرى. ولكن كلما ضمّنتَ المزيد والمزيد من المكونات ، فمن المنطقي في كثير من الأحيان البدء في تقسيمها إلى ملفات مختلفة. يتيح لك هذا الأمر الاحتفاظ بملفاتك سهلة الفحص وإمكانية إعادة استخدام المكونات في أماكن أكثر.
You will learn
- ما هو ملف المكون الجذري
- كيفية استيراد وتصدير مكون
- متى يجب استخدام الاستيرادات والتصديرات الافتراضية والمسماة
- كيفية استيراد وتصدير عدة مكونات من ملف واحد
- كيفية تقسيم المكونات إلى ملفات متعددة
ملف المكون الجذري
في مكونك الأول، أنشأت مكون Profile
ومكون Gallery
الذي يقوم بتقديمه:
function Profile() { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="كاترين جونسون" /> ); } export default function Gallery() { return ( <section> <h1>علماء مذهلون</h1> <Profile /> <Profile /> <Profile /> </section> ); }
هؤلاء موجودون حاليًا في ملف المكون الجذري ، المسمى App.js
في هذا المثال. في Create React App ، يكون تطبيقك في src/App.js
. اعتمادًا على إعدادك ، قد يكون مكونك الجذري في ملف آخر. إذا كنت تستخدم إطار عمل مع توجيه معتمد على الملفات (File-based routing)، مثل Next.js ، فسيكون مكونك الجذري مختلفًا لكل صفحة.
تصدير واستيراد المكون
ماذا لو أردت تغيير شاشة الهبوط في المستقبل ووضع قائمة بكتب العلوم هناك؟ أو وضع جميع الملفات الشخصية في مكان آخر؟ من المنطقي تحريك Gallery
و Profile
من ملف المكون الجذري. سيجعلهما هذا أكثر مرونة وإعادة استخدامًها في ملفات أخرى. يمكنك نقل المكون في ثلاث خطوات:
- أنشئ ملف JS جديد لوضع المكونات فيه.
- تصدير مكون الوظيفة الخاص بك من هذا الملف (باستخدام التصدير الافتراضي أو التصدير المسمى).
- استيراده في الملف الذي ستستخدم فيه المكون (باستخدام التقنية المقابلة لاستيراد التصدير الافتراضي أو التصدير المسمى).
هنا تم نقل Profile
و Gallery
من App.js
إلى ملف جديد يسمى Gallery.js
. الآن يمكنك تغيير App.js
لاستيراد Gallery
من Gallery.js
:
import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }
لاحظ كيف أن هذا المثال مقسم إلى ملفين للمكونات الآن:
Gallery.js
:- يحدد مكون
Profile
الذي يتم استخدامه فقط في نفس الملف ولا يتم تصديره. - يصدر مكون
Gallery
كـ تصدير افتراضي.
- يحدد مكون
App.js
:- يستورد
Gallery
كـ استيراد افتراضي منGallery.js
. - يصدر المكون الجذري
App
كـ تصدير افتراضي.
- يستورد
Deep Dive
هناك طريقتان رئيسيتان لتصدير القيم باستخدام JavaScript: التصدير الافتراضي والتصدير المسمى. حتى الآن، استخدمت أمثلتنا فقط التصدير الافتراضي. ولكن يمكنك استخدام واحد أو كلاهما في نفس الملف. يمكن للملف أن يحتوي على ما لا يزيد عن تصدير واحد افتراضي، ولكن يمكن أن يحتوي على أي عدد من التصديرات المسماة.
كيفية تصدير مكونك تحدد كيفية استيراده. ستحصل على خطأ إذا حاولت استيراد تصدير افتراضي بنفس الطريقة التي تستورد بها تصديرًا مسمى! يمكن أن يساعدك هذا الرسم البياني على تتبع الأمور:
طريقة الكتابة | جملة التصدير | جملة الاستيراد |
---|---|---|
الافتراضي | export default function Button() {} | import Button from './Button.js'; |
المسمى | export function Button() {} | import { Button } from './Button.js'; |
عندما تكتب استيرادًا افتراضيًا، يمكنك وضع أي اسم تريده بعد import
. على سبيل المثال، يمكنك كتابة import Banana from './Button.js'
بدلاً من ذلك وسيوفر لك نفس التصدير الافتراضي. على العكس من ذلك، مع الاستيرادات المسماة، يجب أن يتطابق الاسم على الجانبين. هذا هو السبب في أنها تسمى استيرادات مسماة!
يستخدم المطورون عادة التصديرات الافتراضية عندما يكون في الملف مكون واحد فقط، ويستخدمون التصديرات المسماة عندما يكون مكونات وقيم متعددة بغض النظر عن الأسلوب البرمجي الذي تفضله، دائمًا ما يجب أن تعطي أسماء معبرة لوظائف المكون والملفات التي تحتوي عليها. يُنصح بعدم استخدام المكونات بدون أسماء، مثل export default () => {}
، لأنها تجعل عملية التصحيح أكثر صعوبة.
تصدير مكونات متعددة من نفس الملف
ماذا لو أردت عرض ملف Profile
واحد فقط بدلاً من معرض؟ يمكنك تصدير مكون Profile
أيضًا. لكن Gallery.js
لديه بالفعل تصدير افتراضي، ولا يمكنك أن تملك اثنين من التصديرات الافتراضية. يمكنك إنشاء ملف جديد مع تصدير افتراضي، أو يمكنك إضافة تصدير مسمى لـ Profile
. يمكن للملف أن يحتوي على تصدير واحد فقط افتراضي، ولكن يمكن أن يحتوي على عدد كبير من التصديرات المسماة!
أولًا، صدّر Profile
من Gallery.js
باستخدام تصدير مسمى (بدون كلمة default
):
export function Profile() {
// ...
}
ثم، استورد Profile
من Gallery.js
إلى App.js
باستخدام استيراد مسمى (مع الأقواس المنحنية):
import { Profile } from './Gallery.js';
أخيرًا، قم بتصيير <Profile />
من مكون App
:
export default function App() {
return <Profile />;
}
الآن، يحتوي Gallery.js
على تصديرين: تصدير Gallery
الافتراضي، وتصدير Profile
المسمى. يستورد App.js
كلاهما. جرب تحرير <Profile />
إلى <Gallery />
والعودة في هذا المثال:
import Gallery from './Gallery.js'; import { Profile } from './Gallery.js'; export default function App() { return ( <Profile /> ); }
الآن، تستخدم مزيجًا من التصديرات الافتراضية والمسماة:
Gallery.js
:- يصدر مكون
Profile
كـ تصدير مسمى يسمىProfile
. - يصدر مكون
Gallery
كـ تصدير افتراضي.
- يصدر مكون
App.js
:- يستورد
Profile
كـ استيراد مسمى يسمىProfile
منGallery.js
. - يستورد
Gallery
كـ استيراد افتراضي منGallery.js
. - يصدر مكون
App
الجذر كـ تصدير افتراضي.
- يستورد
Recap
في هذه الصفحة تعلمت:
- ما هو ملف المكون الجذري
- كيفية استيراد وتصدير مكون
- متى وكيفية استخدام الاستيرادات والتصديرات الافتراضية والمسماة
- كيفية تصدير عدة مكونات من نفس الملف
Challenge 1 of 1: تقسيم المكونات أكثر
حاليًا، يصدر Gallery.js
كل من Profile
و Gallery
، وهو أمر محير قليلاً.
انقل مكون Profile
إلى Profile.js
الخاص به، ثم غير مكون App
ليقوم بتصيير كل من <Profile />
و <Gallery />
بعد الآخر.
ربما تستخدم إما تصديرًا افتراضيًا أو مسمى لـ Profile
، ولكن تأكد من استخدام بناء الجملة المستوردة المقابلة في كل من App.js
و Gallery.js
! يمكنك الرجوع إلى الجدول من النظرة الأعمق أعلاه:
طريقة الكتابة | جملة التصدير | جملة الاستيراد |
---|---|---|
الافتراضي | export default function Button() {} | import Button from './Button.js'; |
المسمى | export function Button() {} | import { Button } from './Button.js'; |
// Move me to Profile.js! export function Profile() { return ( <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); } export default function Gallery() { return ( <section> <h1>علماء مذهلون</h1> <Profile /> <Profile /> <Profile /> </section> ); }
بعد أن تجعله يعمل مع نوع واحد من التصديرات، اجعله يعمل مع النوع الآخر.