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

Question

我有以下目录结构

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

在 Component1 的 index.js 和 Compoennt1.tsx 我导出了默认值

Component1/index.js

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

Component1/Component1.tsx

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

export default Component1

在 Component2.tsx 中，我想通过默认导入导入 Component1.tsx。但是它抱怨 'no default export in /Component1/index'。我认为目录 /Compoennt1 正在默认导出 Component1.tsx，但它不起作用

Component2.tsx

// doesn't work
import Component1 from './Component1'

// both works
import { Component1 } from './Component1' or
import Component1 from './Component1/Component1'

有人可以解释为什么我不能默认 export/import 当它通过文件夹时，或者这是 imports/exports 的工作方式吗？

Answer 1

这里是命名导出（命名为Component1），不是默认导出：

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

这就是通过命名导入导入它的原因：

import { Component1 } from './Component1'

如果要使其成为 Component1/index.js 的默认导出，您需要

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

就个人而言，我喜欢在编写代码时保持一致 - 不必试图回忆，对于 每个模块，“此模块是否导出了默认值或其他内容，这很好取名？”在给定的项目中，您可能会发现到处使用默认导出或到处使用命名导出更容易，但不要混合使用它们。

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

How to default export from a directory in JavaScript/TypeScript

javascript

typescript

ecmascript-6

reactjs