Learn React
Describing the UI

ການ Import ແລະ Export Components

ຄວາມມະຫັດສະຈັນຂອງ component ແມ່ນຢູ່ບ່ອນທີ່ມັນສາມາດນຳກັບມາໃຊ້ໃໝ່ໄດ້: ທ່ານສາມາດສ້າງ components ທີ່ປະກອບດ້ວຍ component ອື່ນ. ແຕ່ເມື່ອທ່ານຊ້ອນ component ຫຼາຍຂຶ້ນເລື້ອຍໆ, ກໍຈະມີເຫດຜົນທີ່ຄວນເລີ່ມແຍກ component ອອກມາເປັນຟາຍຕ່າງໆ. ນີ້ຊ່ວຍໃຫ້ທ່ານສາມາດກວດ ແລະ ນຳ component ກັບມາໃຊ້ໃໝ່ໄດ້ໃນບ່ອນອື່ນໆຫຼາຍຂຶ້ນ.

You will learn

  • ຟາຍ Root component ແມ່ນຫຍັງ
  • ວິທີການ import ແລະ export component
  • ເມື່ອໃດທີ່ຕ້ອງໃຊ້ ການ import ແລະ export ເປັນຄ່າເລີ່ມຕົ້ນ ແລະ ການຕັ້ງຊື່
  • ວິທີການ import ແລະ export ຫຼາຍ component ຈາກໜຶ່ງຟາຍ
  • ວິທີການແຍກ components ອອກເປັນຫຼາຍຟາຍ

ຟາຍ root component

ໃນ Component ທຳອິດຂອງທ່ານ, ທ່ານໄດ້ສ້າງ component Profile ແລະ component Gallery ເພື່ອສະແດງມັນ:

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

export default function Gallery() {
  return (
    <section>
      <h1>ນັກວິທະຍາສາດທີ່ໜ້າປະຫຼາດໃຈ</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

ປັດຈຸບັນຟາຍເຫຼົ່ານີ້ຢູ່ໃນ ຟາຍ root component, ຊື່ App.js ໃນຕົວຢ່າງນີ້. ໃນ ການສ້າງແອັບ React, ແອັບຂອງທ່ານຢູ່ໃນ src/App.js. ຂຶ້ນກັບການຕັ້ງຄ່າຂອງທ່ານ, Root component ຂອງທ່ານສາມາດເປັນຟາຍອື່ນກໍໄດ້. ຖ້າທ່ານໃຊ້ framework ທີ່ມີການກຳນົດ routing ຕາມ file-based, ເຊັ່ນ Next.js, Root component ຂອງທ່ານຈະແຕກຕ່າງກັນໄປໃນແຕ່ລະ page.

ການ import ແລະ export component

ຈະເຮັດແນວໃດຖ້າທ່ານຕ້ອງການປ່ຽນ landing screen ໃນອະນາຄົດ ແລະ ເອົາລາຍການຂອງປື້ມວິທະຍາສາດໃສ່ໃນນັ້ນ? ຫຼື ເອົາ profile ທັງໝົດໄວ້ບ່ອນອື່ນ? ການຍ້າຍ Gallery ແລະ Profile ອອກຈາກຟາຍ root component ເປັນເລື່ອງທີ່ສົມເຫດສົມຜົນ. ນີ້ຈະເຮັດໃຫ້ມັນແຍກເປັນ module ໄດ້ຫຼາຍຂື້ນ ແລະ ສາມາດນຳມາໃຊ້ຊໍ້າກັບຟາຍອື່ນໆ. ທ່ານສາມາດຍ້າຍ component ໃນ 3 ຂັ້ນຕອນ:

  1. ສ້າງ ຟາຍ JS ໃໝ່ເພື່ອເອົາ component ເຂົ້າໄປ.
  2. Export Component ຟັງຊັ່ນຂອງທ່ານຈາກຟາຍນັ້ນ (ໂດຍໃຊ້ default ຫຼື named exports).
  3. Import ໃນຟາຍທີ່ທ່ານຈະໃຊ້ component (ໂດຍໃຊ້ເຕັກນິກທີ່ກ່ຽວຂ້ອງໃນການ import default ຫຼື named exports).

ທັງ Profile ແລະ Gallery ຖືກຍ້າຍອອກຈາກ App.js ໄປໃນຟາຍໃໝ່ຊື່ Gallery.js. ຕອນນີ້ທ່ານສາມາດປ່ຽນ App.js ເພື່ອ import Gallery ຈາກ Gallery.js:

import Gallery from './Gallery.js';

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

ສັງເກດ ຕົວຢ່າງນີ້ໄດ້ແຕກອອກເປັນ 2 ຟາຍ component ໄດ້ແນວໃດ:

  1. Gallery.js:
    • ປະກາດ component Profile ທີ່ໃຊ້ສະເພາະໃນຟາຍດຽວກັນ ແລະ ບໍ່ຖືກ export.
    • Export component Gallery ເປັນ default export.
  2. App.js:
    • Imports Gallery ເປັນ default import ຈາກ Gallery.js.
    • Exports root component ຂອງ App ເປັນ default export.

Note

ທ່ານອາດຈະພົບຟາຍທີ່ບໍ່ມີນາມສະກຸນຟາຍ .js ດັ່ງນີ້:

import Gallery from './Gallery';

'./Gallery.js' ຫຼື './Gallery' ຈະເຮັດວຽກຮ່ວມກັບ React ໄດ້, ເຖິງວ່າອັນທຳອິດມັນຈະຄ້າຍກັບວິທີທີ່ native ES Modules ເຮັດວຽກ.

Deep Dive

default ແລະ named exports

ມີສອງວິທີຫຼັກໃນການ export value ດ້ວຍ JavaScript: default exports ແລະ named exports. ຈົນເຖີງຕອນນີ້, ຕົວຢ່າງຂອງພວກເຮົາໃຊ້ default exports. ແຕ່ທ່ານສາມາດໃຊ້ຢ່າງໃດຢ່າງໜຶ່ງ ຫຼື ທັງສອງຢ່າງໃນຟາຍດຽວກັນ. ໜຶ່ງຟາຍບໍ່ສາມາດມີຫຼາຍກວ່າໜຶ່ງ default export, ແຕ່ມັນສາມາດມີຫຼາຍ named export ຕາມທີ່ທ່ານຕ້ອງການ.

Default and named exports

ວິທີທີ່ທ່ານ export component ເປັນຕົວກຳນົດວິທີທີ່ທ່ານຕ້ອງ import ມັນ. ທ່ານຈະໄດ້ຮັບຂໍ້ຜິດພາດຖ້າທ່ານພະຍາຍາມ import default export ແບບດຽວກັບທີ່ທ່ານໃຊ້ named export! Chart ນີ້ສາມາດຊ່ວຍໃຫ້ທ່ານຕິດຕາມ:

SyntaxExport statementImport statement
Defaultexport default function Button() {}import Button from './Button.js';
Namedexport function Button() {}import { Button } from './Button.js';

ເມື່ອທ່ານຂຽນ default import, ທ່ານສາມາດໃສ່ຊື່ໃດກໍໄດ້ທີ່ທ່ານຕ້ອງການຫຼັງ import. ຕົວຢ່າງ, ທ່ານສາມາດຂຽນ import Banan from './Button.js' ແທນໄດ້ ແລະ ມັນຈະຍັງໃຊ້ຄືກັນກັບ default export. ໃນທາງກົງກັນຂ້າມ, ດ້ວຍ named imports, ຊື່ຕ້ອງກົງກັນທັງສອງດ້ານ. ນັ້ນເປັນເຫດຜົນທີ່ເອີ້ນວ່າ named import!

ຜູ້ຄົນມັກຈະໃຊ້ default exports ຖ້າຟາຍ export ມີແຕ່ component ດຽວ, ແລະ ໃຊ້ named exports ຖ້າມັນ exports ຫຼາຍ component ແລະ value. ບໍ່ວ່າທ່ານຈະມັກ style ການຂຽນ code ແບບໃດ, ໃຫ້ຕັ້ງຊື່ທີ່ມີຄວາມໝາຍໃຫ້ກັບຟັງຊັ່ນ component ແລະ ຟາຍທີ່ມີຢູ່ສະເໝີ. Components ທີ່ບໍ່ມີຊື່, ເຊັ່ນ: export default () => {}, ແມ່ນບໍ່ຮອງຮັບ ເພາະວ່າມັນຈະເຮັດໃຫ້ການ debug ຍາກຂຶ້ນ.

ການ Export ແລະ import ຫຼາຍ components ຈາກຟາຍດຽວກັນ

ຈະເຮັດແນວໃດຖ້າທ່ານຕ້ອງການສະແດງໜຶ່ງ Profile ແທນ gallery? ທ່ານສາມາດ export Component Profile ຄືກັນ. ແຕ່ Gallery.js ແມ່ນເປັນ default export ຢູ່ແລ້ວ, ແລະ ທ່ານບໍ່ສາມາດມີ ສອງ default exports. ທ່ານສາມາດສ້າງຟາຍໃໝ່ດ້ວຍ default export, ຫຼື ທ່ານສາມາດເພີ່ມ named export ສຳລັບ Profile. ໜຶ່ງຟາຍສາມາດມີໄດ້ແຕ່ໜຶ່ງ default export ເທົ່ານັ້ນ, ແຕ່ສາມາດມີຫຼາຍ named exports!

Note

ເພື່ອຫຼຸດຄວາມສັບສົນທີ່ອາດຈະເກີດຂື້ນລະຫວ່າງ default ແລະ named exports, ບາງທີມເລືອກທີ່ຈະຢູ່ກັບແບບດຽວເທົ່ານັ້ນ (default ຫຼື named), ຫຼື ຫຼີກຫຼ່ຽງການປະສົມກັນໃນຟາຍດຽວ. ຫາສິ່ງທີ່ດີສຸດສຳລັບທ່ານ!

ທຳອິດ, export Profile ຈາກ Gallery.js ໂດຍການໃຊ້ named export (ບໍ່ມີ keyword default):

export function Profile() {
  // ...
}

ຈາກນັ້ນ, import Profile ຈາກ Gallery.js ໃສ່ໃນ App.js ນຳໃຊ້ named import (ດ້ວຍວົງປີກກາ):

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

ສຸດທ້າຍ, ສະແດງ <Profile /> ຈາກ component App:

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

ຕອນນີ້ Gallery.js ປະກອບມີສອງ exports: default Gallery export, ແລະ named Profile export. App.js imports ທັງສອງ. ລອງແກ້ໄຂ <Profile /> ໃສ່ <Gallery /> ແລະ ກັບໄປຕົວຢ່າງນີ້:

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

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

ຕອນນີ້ທ່ານໄດ້ໃຊ້ default ແລະ named exports ປົນກັນ:

  • Gallery.js:
    • Exports Component Profile ເປັນ named export ເອີ້ນວ່າ Profile.
    • Exports Component Gallery ເປັນ default export.
  • App.js:
    • Imports Profile ເປັນ named import ເອີ້ນວ່າ Profile ຈາກ Gallery.js.
    • Imports Gallery ເປັນ default import ຈາກ Gallery.js.
    • Exports root component ຂອງ App ເປັນ default export.

Recap

ໃນໜ້ານີ້ທ່ານໄດ້ຮຽນ:

  • ຟາຍ Root component ແມ່ນຫຍັງ
  • ວິທີການ import ແລະ export component
  • ເມື່ອໃດທີ່ຕ້ອງໃຊ້ ການ import ແລະ export ເປັນຄ່າເລີ່ມຕົ້ນ ແລະ ການຕັ້ງຊື່
  • ວິທີການ import ແລະ export ຫຼາຍ component ຈາກໜຶ່ງຟາຍ
  • ວິທີການແຍກ components ອອກເປັນຫຼາຍຟາຍ

Try out some challenges

Challenge 1 of 1:
ແຍກ components ຕື່ມ

ປັດຈຸບັນ, Gallery.js exports ທັງ Profile ແລະ Gallery, ເຊິ່ງເຮັດໃຫ້ສັບສົນໜ້ອຍໜຶ່ງ.

ຍ້າຍ Component Profile ໄປທີ່ Profile.js ຂອງຕົວເອງ, ແລະ ຈາກນັ້ນປ່ຽນ component App ເພື່ອສະແດງທັງ <Profile /> ແລະ <Gallery /> ເທື່ອລະລາຍການ.

ທ່ານອາດໃຊ້ທັງ default ຫຼື named export ສຳລັບ Profile, ແຕ່ໃຫ້ແນ່ໃຈວ່າທ່ານໃຊ້ syntax import ທີ່ກ່ຽວຂ້ອງໃນທັງ App.js ແລະ Gallery.js! ທ່ານສາມາດອ້າງອີງຈາກຕາຕະລາງ ຫຼື ລົງເລິກດ້ານເທິງ:

SyntaxExport statementImport statement
Defaultexport default function Button() {}import Button from './Button.js';
Namedexport 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>
  );
}

ຫຼັງຈາກທີ່ທ່ານເຂົ້າໃຈໜຶ່ງວິທີການເຮັດວຽກຂອງປະເພດການ exports ແລ້ວ, ເຮັດໃຫ້ມັນເຮັດວຽກໄດ້ກັບອີກປະເພດ.

PreviousYour First ComponentNextWriting Markup with JSX

How do you like these docs?