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 {
  // ...
};