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语句的下列形式是仅适用于默认的导出的模块。

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

你需要这样做：

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

或者你的类导出为默认值，那么进口将作为你写的：

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