React 中每个模块只允许一个默认导出

Only one default export allowed per module in React

当我们在文件中有超过 1 个默认导出时，会出现错误“每个模块只允许一个默认导出”。要解决该错误，请将第二个默认导出替换为命名导出或将值移动到另一个文件以便能够使用另一个默认导出。

下面是错误如何发生的示例。

应用程序.js


export default function App() { // 👈️ default export
  return <div>hello</div>;
}

// ⛔️ Error: Parsing error: Only one
// default export allowed per module.
export default function Button() { // 👈️ default export
  return <button>Submit</button>
}

每个文件只能有一个默认导出，因此我们必须将第二个默认导出移动到另一个文件或将其转换为命名导出。

以下是将第二个导出转换为命名导出的方法。

应用程序.js


export default function App() { // 👈️ default export
  return <div>hello</div>;
}

export function Button() { // 👈️ named export
  return <button>Submit</button>;
}

这是将变量导入另一个文件的方法。

索引.js


// 👇️ default and named import
import App, {Button} from './App';

console.log(App);
console.log(Button);

我们必须用大括号将命名的导入包起来。每个文件只能有一个默认导出，但您可以根据需要拥有任意多个命名导出。

如果您不想使用命名导出，请将第二个组件移动到一个单独的文件，并确保坚持1每个文件的最大默认导出。

根据我的经验，大多数真实世界的代码库都专门使用命名导出和导入，因为它们可以更轻松地利用 IDE 进行自动完成和自动导入。
您也不必考虑使用默认导出或命名导出导出哪些成员。

以下是如何将上面的示例转换为仅使用命名的导出和导入。

应用程序.js


export function App() { // 👈️ named export
  return <div>hello</div>;
}

export function Button() { // 👈️ named export
  return <button>Submit</button>;
}

以下是您将如何导入命名的导出。

索引.js


// 👇️ named imports
import {App, Button} from './App';

console.log(App);
console.log(Button);

这比必须记住您导出的哪些值作为默认值以及哪些值命名要好得多。

您对实现细节的考虑越少，您就越能专注于应用程序中特定领域的逻辑。

结论

–