تعلم React
وصف واجهة المستخدم UI

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

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

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 في هذا المثال. اعتمادًا على إعدادك لبيئة العمل، قد يكون مكونك الجذري في ملف آخر. إذا كنت تستخدم إطار عمل مع توجيه معتمد على الملفات (File-based routing)، مثل Next.js، فسيكون مكونك الجذري مختلفًا لكل صفحة.

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

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

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

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

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

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

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

Note

ربما تواجه ملفات تترك امتداد الملف .js مثل هذا:

import Gallery from './Gallery';

كلا './Gallery.js' أو './Gallery' سيعملان مع React، على الرغم من أن الأولى أقرب إلى كيفية عمل ES Modules الأصلية.

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. يمكن للملف أن يحتوي على تصدير واحد فقط افتراضي، ولكن يمكن أن يحتوي على عدد كبير من التصديرات المسماة!

Note

لتقليل الارتباك المحتمل بين التصديرات الافتراضية والمسماة، يختار بعض الفِرَق استخدام نمط واحد فقط (افتراضي أو مسمى)، أو تجنب مزجهما في ملف واحد. افعل ما يعمل بشكل أفضل بالنسبة لك!

أولًا، صدّر 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

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

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

Try out some challenges

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>
  );
}

بعد أن تجعله يعمل مع نوع واحد من التصديرات، اجعله يعمل مع النوع الآخر.

Previousمكوّنك الأول
Nextكتابة ترميز البناء بـ JSX