匯入與匯出元件

元件的魔力在於其可重複使用性：你可以建立由其他元件組成的元件。但隨著你嵌套越來越多元件，通常會開始將它們拆分到不同的檔案中。這讓你的檔案更容易瀏覽，並能在更多地方重複使用元件。

根元件檔案

在你的第一個元件中，你建立了一個Profile元件和一個渲染它的Gallery元件：

這些元件目前位於一個根元件檔案中，在此範例中名為App.js。根據你的設定，你的根元件可能位於另一個檔案中。如果你使用基於檔案路由的框架，例如 Next.js，你的每個頁面都會有不同的根元件。

匯出與匯入元件

如果你將來想更改登陸畫面，並在那裡放置科學書籍清單呢？或者將所有個人資料放在其他地方？將Gallery和Profile移出根元件檔案是合理的。這將使它們在其他檔案中更具模組化和可重複使用性。你可以透過三個步驟移動元件：

1. 建立一個新的 JS 檔案來放置元件。
2. 從該檔案匯出你的函式元件（使用預設或具名匯出）。
3. 在你將使用元件的檔案中匯入它（使用對應的技術來匯入預設或具名匯出）。

這裡Profile和Gallery都已從App.js移到一個名為Gallery.js的新檔案中。現在你可以更改App.js以從Gallery.js匯入Gallery：

請注意，此範例現在已拆分為兩個元件檔案：

1. Gallery.js：
   • 定義了 Profile 元件，該元件僅在同一檔案內使用且未匯出。
   • 將 Gallery 元件作為 預設匯出。
2. App.js：
   • 從 Gallery的方式匯入預設匯入 以 Gallery.js。
   • 將根元件 App 作為 預設匯出。

從同一檔案匯出和匯入多個元件

如果您只想顯示一個 Profile而不是整個畫廊呢？您也可以匯出Profile 元件。但 Gallery.js已經有一個預設 匯出，而您不能有 兩個 預設匯出。您可以建立一個具有預設匯出的新檔案，或者為 命名新增一個Profile匯出。一個檔案只能有一個預設匯出，但可以有無數個命名匯出！

使用命名匯出（不使用匯出Profile：Gallery.js default關鍵字）從

接著，使用命名匯入（使用大括號）從Gallery.js匯入Profile 到 App.js：

最後，從App 元件中 渲染<Profile />：

現在Gallery.js包含了兩個匯出：一個預設的Gallery匯出，以及一個命名的Profile匯出。App.js匯入了兩者。試著在此範例中將<Profile />編輯為<Gallery /> 並返回：

現在你正在混合使用預設匯出和命名匯出：

• Gallery.js：
  • 將 Profile元件作為一個名為 Profile的命名匯出。
  • 將 Gallery元件作為一個預設匯出。
• App.js：
  • 從 Gallery.js 將 Profile作為一個名為Profile的命名匯入。
  • 從 Gallery.js 將 Gallery作為一個預設匯入。
  • 將根元件 App 作為一個 預設匯出。

總結

在本頁中你學到了：

• 什麼是根元件檔案
• 如何匯入和匯出元件
• 何時以及如何使用預設和命名的匯入與匯出
• 如何從同一個檔案匯出多個元件