Nextjs 一行導入導出模塊

Question

我正在開發 NextJs 應用程序，我有一個 header 文件夾，其中包含 Header.jsx 和默認導出Header 。

在同一個文件夾中，我有一個帶有此代碼的index.js

export * from './Header'

但如果我使用它，它會失敗並出現錯誤

Attempted import error: '../components/header' does not contain a default export (imported as 'Header').

如果我用這個

import Header from './Header'

export default Header

它工作正常。 有沒有辦法在 NextJs 中使用單行導出來避免這種重復？

謝謝

Answer 1

導出與默認導出

• ES6 提供了兩種從文件中導出模塊的方法：命名導出和默認導出。

1. 命名出口：（出口）

   • 您可以在一個文件中有多個命名導出

   // File./AllComponents.js export const Comp1= () => {} export const Comp2= () => {} //File./SomeComponent.js // ex. importing a single named export import { Comp1 } from "./AllComponents"; // ex. importing multiple named exports import { Comp1, Comp2} from "./AllComponents"; // ex. giving a named import a different name by using "as": import { Comp1 as MyCustomName } from "./AllComponents";

• 您可以將它們全部導入為一個 object

   import * as MainComponents from "./AllComponents"; // use MainComponents.Comp1 and MainComponents.Comp2

默認導出：（導出默認）

• 我們可以對每個文件進行一個默認導出。
• 導入時，我們要做如下

// File 1: create and export MyComponent
//create a component
const MyComponent = () => {}
//export it
export default MyComponent;

// File 2: import the component in some File
import DefaultExportFromAComponent from "./DefaultExportFromAComponent";