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

查看文档：

以下形式的 import 语句仅适用于具有默认导出的模块。

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

你需要这样做：

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

或者将您的类导出为默认值，然后导入将按照您编写的方式工作：

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