ES6 импорт импорта неопределенных

Question

У меня есть два файла в моем приложении реагирует:

/* MyApp/components/my-component.jsx */ 

export class MyComponent extends React.Component { 
    // ... 
}; 

console.log(MyComponent); // (1) 

И

/* MyApp/my-app.jsx */ 

import MyComponent from './components/my-component'; 

console.log(MyComponent); // (2) 

console.log номер (1) дает мне это: function MyComponent(props, context) {.... Но console.log номер (2) дает мне undefined.

Что я делаю неправильно? Это кажется довольно простым и все же не сработает.

Answer 1

Посмотрите в документации:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Следующая форма оператора импорта только для модуля с экспортом по умолчанию.

import MyComponent from './components/my-component'; 

Вы должны сделать это:

import {MyComponent} from './components/my-component'; 

Или экспортировать класс по умолчанию, то импорт будет работать, как вы написали:

export default class MyComponent extends React.Component { 
    // ... 
};