我不明白为什么在react中这样的导出

发布于 2025-01-21 00:00:01 字数 316 浏览 0 评论 0原文

我发现很多文件都是这样导出的，但我不明白为什么要这样导出。有什么优点或者理由吗？

index.ts

export { default } from './Something'

Something.tsx

cosnt _Something= () => {
 some codes....
}

cosnt Something = memo(_Something)

export default Something

这两个 tsx 文件存在于同一目录中。

原文

I found many files were exported like this, but I don't understand why these were exported this way.
Are there any advantages or reasons?

index.ts

export { default } from './Something'

Something.tsx

cosnt _Something= () => {
 some codes....
}

cosnt Something = memo(_Something)

export default Something

These two tsx file exist same directory.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黑白记忆 2025-01-28 00:00:01

您正在寻找默认导出和命名导出。

在 export default Something 情况下，您可以将其与 import Something from 'path' 一起使用。所以你只想导出一件东西。它也可以用作命名空间。它等于 export { myFunction as default };

在 export { Something } 情况下，您可以将其与 import { Something } from 'path' 一起使用。您可以导出许多带有名称的东西。它增加了可读性。当然，您也可以从 'path' 导入 {Something as Another}。

这两种方法并不冲突。但只能指定一个默认值。

// index.ts
export default function Something(){
}
export const CONST_A = 'A'
export const CONST_B = 'B'

// use.ts
import { default as Something, CONST_A, CONST_B} from './index.ts'

You're looking for default export and named exports.

in export default Something case, you can use it with import Something from 'path'. So you only want to export one thing. It can be used as a namespace also. It equals export { myFunction as default };

in export { Something } case, you can use it with import { Something } from 'path'. You can export many things with names. It increases the readability. For sure, you can also import { Something as Another} from 'path'.

These two appoarches are not conflict. But only one default can be assigned.

// index.ts
export default function Something(){
}
export const CONST_A = 'A'
export const CONST_B = 'B'

// use.ts
import { default as Something, CONST_A, CONST_B} from './index.ts'

回复收藏 0 原文

醉城メ夜风 2025-01-28 00:00:01

它只是一个模式，而不是导入精确的路径：

import Nav from 'components/Nav.react';
import Tooltip from 'components/Tooltip.react';

有时您需要合并：

import { Nav, Tooltip } from 'components';

它需要来自index文件的导出，位于目标文件夹中的文件（在这种情况下为“组件”）：

// src/components/index.ts

export * from './Nav.react';
export * from './Tooltip.react';

// Or
export { Nav } from './Nav.react'; // Has a named export
export { default as Tooltip } from './Tooltip.react'; // Has default export

请参阅其他问题中的更多上下文如何在vscode中智能Intellisense别名模块路径。

Its just a pattern, instead of importing exact paths:

import Nav from 'components/Nav.react';
import Tooltip from 'components/Tooltip.react';

Sometimes you want a merge:

import { Nav, Tooltip } from 'components';

It requires exports from index file located at the target folder ('components' in this case):

// src/components/index.ts

export * from './Nav.react';
export * from './Tooltip.react';

// Or
export { Nav } from './Nav.react'; // Has a named export
export { default as Tooltip } from './Tooltip.react'; // Has default export

See more context in other question How to intellisense alias module path in VSCode.

回复收藏 0 原文

~没有更多了~