时间戳

首页 > 解决方案 > Webpack 从目录导入 React 组件

javascript - Webpack 从目录导入 React 组件

问题描述

我有个问题。我用 create-react-app 制作了我的项目，这基本上是我的结构：

src
├── app
│   ├── index.js
│   └── …
├── navigation
│   ├── index.js
│   └── …
└── …

我的应用程序/index.js

import App from 'app/App';

export default {
  App
};

我的导航/index.js：

import Navigation from 'navigation/Navigation';

export default {
  Navigation
};

问题是我可以轻松地从以下目录导入：

import { App } from './app';
import { Navigation } from '.navigation';

问题是导入Navigation按预期工作并且导入App不起作用。当我像上面那样导入 App 时'app' does not contain an export named 'App'，如果我尝试像这样导入它：

import App from './app';

我得到一个像这样的对象{App: function(){}}，如果我像<App.App />预期的那样渲染它。唯一的区别是App类组件和Navigation功能组件。

标签： javascriptreactjswebpackcreate-react-appjavascript-import

解决方案

如果您的文件中有单个导入，您可以使用：

export default FileName

如果您有多个导入，您可以使用：

export { FileName1, FileName2}

如果您想从多个导出的文件中默认导出某些文件，您可以使用：

export {default as FileName1, FileName2}

推荐阅读