ایمپورت و اکسپورت کامپوننت ها

mohsen•1 ماه قبل•1 ماه قبل
ارسال شده در
react/docs/v19

عنوان: ایمپورت و اکسپورت کامپوننت ها

جادوی کامپوننت ها در قابلیت استفاده مجدد آنها نهفته است: شما می‌توانید کامپوننت هایی بسازید که از کامپوننت های دیگری تشکیل شده‌‌اند. اما هر چه بیشتر کامپوننت ها را در هم تو در تو کنید، معمولاً منطقی است که آنها را به فایل‌های مختلف تقسیم کنید. این کار به شما اجازه می‌دهد تا فایل‌های خود را آسان‌تر اسکن کنید و کامپوننت ها را در جاهای بیشتری دوباره استفاده کنید.

فایل کامپوننت ریشه

در مطلب اولین کامپوننت شما شما کامپوننت Profile و کامپوننت Gallery را ساختید که پروفایل را رندر می‌کند:

      function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

این کامپوننت ها در حال حاضر در یک فایل کامپوننت ریشه به نام App.js قرار دارند. البته ممکن است بر اساس تنظیمات شما، کامپوننت ریشه در فایل دیگری باشد. اگر از یک فریم‌ورک با مسیریابی مبتنی بر فایل استفاده کنید، مانند 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 />
  );
}
    
      function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

توجه داشته باشید که این مثال حاضر به دو فایل کامپوننت تقسیم شده است:

  • Gallery.js:
    • کامپوننت Profile را تعریف می‌کند که فقط در همان فایل استفاده می‌شود و اکسپورت نمی‌شود.
    • کامپوننت Gallery را به عنوان یک اکسپورت پیش‌فرض اکسپورت می‌کند.
  • App.js:
    • Gallery را به عنوان یک ایمپورت پیش‌فرض از Gallery.js وارد می‌کند.
    • کامپوننت ریشه App را به عنوان یک اکسپورت پیش‌فرض اکسپورت می‌کند.

شما ممکن است دستور ایمپورت فایلی را ببینید که پسوند .js از آن حذف شده است:

      import Gallery from './Gallery';

هر دو './Gallery.js' یا './Gallery' با React کار می‌کنند، اگرچه اولی به نحوه کار ماژول‌های ES بومی نزدیک‌تر است.

اکسپورت پیش‌فرض در مقابل اکسپورت نام‌دار

دو روش اصلی برای اکسپورت مقادیر با جاوااسکریپت وجود دارد: اکسپورت پیش‌فرض و اکسپورت نام‌دار. تا کنون، مثال‌های ما فقط از اکسپورت پیش‌فرض استفاده کرده‌اند. اما شما می‌توانید یکی یا هر دوی آنها را در یک فایل استفاده کنید. یک فایل نمی‌تواند بیش از یک

اکسپورت پیش‌فرض و نام‌دار

روش اکسپورت کامپوننت شما تعیین می‌کند که چگونه باید آن را ایمپورت کنید. اگر سعی کنید یک اکسپورت پیش‌فرض را درست به روش اکسپورت نام‌دار ایمپورت کنید، با خطا مواجه خواهید شد! این جدول می‌تواند به شما در پیگیری کمک کند:

نحوجمله اکسپورتجمله ایمپورت
پیش‌فرض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 اضافه کنید. یک فایل فقط می‌تواند یک اکسپورت پیش‌فرض داشته باشد، اما می‌تواند اکسپورت نام‌دار متعددی در یک فایل تعریف کنید!

برای کاهش ابهام بین اکسپورت پیش‌فرض و نام‌دار، برخی از تیم‌ها تصمیم می‌گیرند که فقط به یک سبک (پیش‌فرض یا نام‌دار) پایبند باشند، یا از ترکیب آنها در یک فایل خودداری کنند. اما آنچه برای شما بهتر است، را انجام دهید!

ابتدا، کامپوننت از 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 />
  );
}
    
      export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

اکنون شما از ترکیبی از اکسپورت پیش‌فرض و نام‌دار استفاده می‌کنید:

  • Gallery.js:
    • کامپوننت Profile را به عنوان یک اکسپورت نام‌دار به نام اکسپورت می‌کند.
    • کامپوننت Gallery را به عنوان یک اکسپورت پیش‌فرض اکسپورت می‌کند.
  • App.js:
    • Profile را به عنوان یک ایمپورت نام‌دار به نام از Gallery.js وارد می‌کند.
    • Gallery را به عنوان یک ایمپورت پیش‌فرض از Gallery.js وارد می‌کند.
    • کامپوننت ریشه App را به عنوان یک اکسپورت پیش‌فرض اکسپورت می‌کند.

در این صفحه آموختید:

  • فایل کامپوننت ریشه چیست
  • چگونه یک کامپوننت را ایمپورت و اکسپورت کنیم
  • چه زمانی و چگونه از ایمپورت و اکسپورت پیش‌فرض و نام‌دار استفاده کنیم
  • چگونه چند کامپوننت را از یک فایل اکسپورت کنیم

چالش تقسیم بیشتر کامپوننت ها

در حال حاضر، 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';

فراموش نکنید کامپوننت های خود را در جایی که فراخوانی شده‌اند، ایمپورت کنید. آیا Gallery از Profile استفاده نمی‌کند؟

جواب چالش بالا

این راه حل با اکسپورت نام‌دار است:

      import Gallery from './Gallery.js';
import { Profile } from './Profile.js';

export default function App() {
  return (
    <div>
      <Profile />
      <Gallery />
    </div>
  );
}
    
      import { Profile } from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
    
      export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

این راه حل با اکسپورت پیش‌فرض است:

      import Gallery from './Gallery.js';
import Profile from './Profile.js';

export default function App() {
  return (
    <div>
      <Profile />
      <Gallery />
    </div>
  );
}
    
      import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
    
      export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}
رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!