时间戳

首页 > 解决方案 > 为什么我的 ReactJS 导出语句不起作用？

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

问题描述

我最终试图动态地创建一个导入组件的对象以一次全部导出。但在我下面的简单示例中，我什至无法导出具有 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'"

标签： javascriptreactjsecmascript-6importexport

解决方案

正如错误所说，您没有命名的export Cards。您有一个默认导出，Components它是一个具有属性的对象Cards。

如果你想命名导出Cards然后做

export {Cards};

或者，如果您甚至不需要该Components对象，则可以直接使用重新导出组件

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

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

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

有关更多信息，请参阅exportMDN 上的文档。

推荐阅读