Webpack импортирует компонент React из каталога - PullRequest
Новая
       37

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

0 голосов
/ 02 мая 2018

У меня проблема. Я сделал свой проект с помощью 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 является компонентом функции.

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

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

export default FileName

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

export { FileName1, FileName2}

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

export {default as FileName1, FileName2}
0 голосов
/ 02 мая 2018

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

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

Подробнее см. 2ality.com / 2014/09 / es6-modules-final.html ...

...