React，如何从文件夹index.js导入组件

Question

我正在尝试构建一个小组件库。因此，将它们放在一个文件夹中，然后只导入我需要的内容，或者在需要时使用import*from文件夹一次性导入所有内容，这是有意义的。

它看起来有点像这样。

/sliceZone
|--index.js
|--newsBlock.js

这就是我在newsBlock.js:中导出组件的方式

export default NewsBlock;

在sliceZone文件夹中的index.js中，我有：

export { NewsBlock } from './newsBlock';

在我正在处理的文件中，我正试图导入它，就像：

import { NewsBlock } from './sliceZone';

但我的终端出现错误

warn "export 'NewsBlock' was not found in './sliceZone'

如何从index.js文件导出零部件？

Answer 1

在index.js文件上，您应该尝试

export {default as NewsBlock} from './newsBlock';

Answer 2

只要有默认导出，就不需要在导入语句中对其进行解构。所以如果你有

export default NewBlock;

您可以使用导入

import NewsBlock from ./newsBlock;
import Anything from ./newsBlock;

上述两种说法都是有效的。并且NewsBlock和Anything导入将具有NewsBlock。

如果您将对象导出为以下

export NewsBlock;

然后你必须销毁它才能使用。

import {NewsBlock} from ./newsBlock;

不确定这是否是你正在寻找的东西，但只是觉得这是相关信息，可能会解决你的问题。

Answer 3

在newsBlock.js中，您可以编写export default NewsBlock ;，也可以从import { NewsBlock } from './sliceZone';或import { NewsBlock } from './sliceZone/index';导入

Answer 4

我设法弄明白了。

在index.js 中

import NewsBlock from './newsBlock';
//Anything else to import from the folder.
export { NewsBlock, /*Anything else to export*/ };

然后当我导入到另一个可以使用的文件中时。

import { NewsBlock, /*Anything else*/ } from './sliceZone/';