为什么我的ReactJS导出语句不起作用？

Question

我最终尝试动态创建导入组件的对象以一次性导出所有组件。但在下面的简单示例中，我什至无法导出具有 1 个组件的对象。这是为什么？

// index.js
// Card is a standard ReactJS component, exported with export default Card
import Card from './Card';

let Components = {};
Components['Card'] = Card;
// this also doesn't work
// Components['Card'] = require('./Card').default

export default Components;
// Error message: "Attempted import error: 'Card' is not exported from './index.js'"

Answer 1

正如错误所示，您没有 named 导出

Cards

。您有一个 default 导出

Components

，它是一个具有属性

Cards

的对象。

如果你想命名导出

Cards

那么就做

export {Cards};

或者，如果您甚至不需要

Components

对象，您可以直接使用

重新导出组件

export {default as Card} from './Card';

但是，如果您确实想要导出一个将一个或多个组件作为属性保存的默认对象，请相应地导入它：

import Components from './index.js';
// use Components.Cards were necessary

---

有关更多信息，请参阅 MDN 上的

export 文档。

Answer 2

这里有两个解决方案。首先，当您将组件分配给

Components

对象时，您可以将

Card

分配为组件，如下所示。

Components['Card'] = <Card/>

然后像这样使用它

<div>{Components.Card}</div>

其次，我最喜欢的是，无论您在

index.js

文件中做什么来存储组件都是可以的。但是当你使用它时，请像下面这样使用。

<Component.Card/>

示例