Webpack импортирует компонент React из каталога

Question

У меня проблема. Я сделал свой проект с помощью create-реагировать-приложение, и я это в основном моя структура:

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' does not contain an export named 'App' и если я попытаюсь импортировать это так:

import App from './app';

Я получаю такой объект {App: function(){}} и если я сделаю это как <App.App /> это работает как ожидалось. Разница лишь в том, что App является компонентом класса и Navigation является компонентом функции.

Answer 1

Если у вас есть один импорт в вашем файле, вы можете использовать:

export default FileName

Если у вас есть несколько импортов, вы можете использовать:

export { FileName1, FileName2}

Если вы хотите экспортировать определенный файл по умолчанию из нескольких экспортируемых файлов, вы можете использовать:

export {default as FileName1, FileName2}

Answer 2

Проблема в том, что вы экспортируете через странный объектный синтаксис:

export default {
  Navigation
}

Тебе нужно:

export default Navigation

Изменить: вставить мой комментарий ниже здесь с лучшим форматированием

Вы можете иметь только один экспорт по умолчанию (даже если это необязательно), но нет общего ограничения на общее количество. Вы можете иметь:

// exports.js
export const a = 1
export const b = 2
export function exportTest () {}
// then a default
export default a 

Но - импорт не-значений по умолчанию происходит только с синтаксисом скобок, скажем, вы хотите импортировать b, который не является экспортом по умолчанию, вам нужно будет использовать:

import { b } from 'exports' 
// or:
import { b as localName } from 'exports'

Пока вы можете импортировать дефолт без скобок и дать ему любое имя:

import whatever from 'exports'
console.log(whatever) // prints 1, as const a = 1 in exports.js

См. http://2ality.com/2014/09/es6-modules-final.html для получения дополнительной информации...