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

【问题标题】：React, how to import components from folder index.jsReact，如何从文件夹 index.js 导入组件
【发布时间】：2020-05-01 15:30:02
【问题描述】：

我正在尝试构建一个小组件库。因此，将它们放在一个文件夹中并且只导入我需要的那些或者在需要时使用 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 文件中导出组件？

【问题讨论】：

你是如何从 newsBlock.js 中导出组件的？因为如果有一个命名的导出，这个例子应该可以工作。如果有默认导出，它将不起作用。
这就是我在 newsBlock.js 中导出组件的方式：export default NewsBlock;
这能回答你的问题吗？ node.js es6 export / import with index.js

标签： javascript reactjs ecmascript-6 es6-modules

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

export default NewBlock;

你可以使用

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

以上两个陈述都是有效的。并且 NewsBlock 和 Anything 导入将具有 NewsBlock。

如果您将对象导出如下

export NewsBlock;

那么你必须解构它才能使用。

import {NewsBlock} from ./newsBlock;

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

【讨论】：

【解决方案3】：

在newsBlock.js 中你可以写export default NewsBlock ; 并且你可以从import { NewsBlock } from './sliceZone'; 或import { NewsBlock } from './sliceZone/index'; 导入它

【讨论】：

【解决方案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/';

【讨论】：