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

Question

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

看起来有点像这样。

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

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

export default NewsBlock;

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

export { NewsBlock } from './newsBlock';

在我正在处理的文件中，我正在尝试将其导入：

import { NewsBlock } from './sliceZone';

但我的终端出现错误

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

如何从 index.js 文件导出组件？

Answer 1

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

导入它

Answer 2

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

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

Answer 3

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

export default NewBlock;

您可以使用

导入它

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

以上说法均有效。 NewsBlock 和 Anything 导入将有 NewsBlock。

如果您导出对象如下

export NewsBlock;

那你必须解构它才能使用

import {NewsBlock} from ./newsBlock;

不确定是否是您要查找的内容，但感觉是相关信息，可能会解决您的问题。

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

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

React, how to import components from folder index.js

javascript

ecmascript-6

reactjs

es6-modules