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

Question

我有一个正在尝试构建的小组件库。 因此，将它们放在一个文件夹中并且只导入我需要的那些或在需要时使用 import * from folder 一次导入是有意义的。

它看起来有点像这样。

 /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。

如果您导出 object 如下

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/';