如何从 JavaScript/TypeScript 中的目录默认导出

Question

我有以下目录结构

- common
|
|--- Component1
|   |
|   |--- index.js
|   |--- Component1.tsx
|   |--- Component1.scss
|
|--- Component2.tsx
|

在 Component1index.js和 Compoennt1.tsx 中，我导出默认值

组件1/index.js

- common
|
|--- Component1
|   |
|   |--- index.js
|   |--- Component1.tsx
|   |--- Component1.scss
|
|--- Component2.tsx
|

组件 1/组件 1.tsx

export { default as Component1 } from './Component1'

我想通过默认导入来Component2.tsx导入。Component1.tsx然而它抱怨“/Component1/index 中没有默认导出”。我认为该目录默认/Compoennt1导出Component1.tsx，但它不起作用

组件2.tsx

const Component1 = () => { code... }

export default Component1

有人可以解释为什么我在通过文件夹时无法默认导出/导入，或者这就是导入/导出的工作原理吗？

Answer 1

这里，它是命名导出（named Component1），而不是默认导出：

export { default as Component1 } from './Component1'

这就是为什么通过命名导入导入它在这里起作用：

import { Component1 } from './Component1'

如果您想将其设为默认导出Component1/index.js，您需要

export { default as default} from './Component1'

就我个人而言，我喜欢在编写代码时保持一致 - 很高兴不必尝试回忆每个模块，“这个模块是否导出了默认值或命名的东西？” 在给定的项目中，您可能会发现在任何地方使用默认导出或在任何地方使用命名导出更容易，但不要混合使用它们。