ES6 Import Import undefined

Question

Ich habe zwei Dateien in meinem reagieren App:

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

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

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

Und

/* MyApp/my-app.jsx */ 

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

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

console.log Nummer (1) gibt mir diese: function MyComponent(props, context) {.... Aber console.log Nummer (2) gibt mir undefined.

Was mache ich falsch? Es scheint ziemlich einfach und wird trotzdem nicht funktionieren.

Answer 1

Schauen Sie in der Dokumentation:

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

Die folgende Form der Import-Anweisung ist nur für ein Modul mit einem Standard-Export.

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

Sie müssen dies tun:

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

Oder Ihre Klasse als Standard exportieren, dann wird der Import funktioniert, wie Sie es geschrieben:

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