为什么我的React Component Export不起作用？

Question

我刚刚做出反应并为自己尝试.经过几个小时的配置webpack只是为了在我的屏幕上获得一个问候世界,我想我现在可以开始了,但是在尝试从文件中渲染另一个组件后,下一个问题.

我的主文件是app.js,它呈现了一切:

import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';

ReactDOM.render(
   <Hello/>,
   document.getElementById('app')
);

Hello组件来自同一文件夹中的hello.js:

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

export default Hello;

当我在没有导入/导出的app.js中做所有事情时,它呈现得很好.它编译也很好.但是现在控制台中存在很多错误.那我错过了什么？

谢谢

格尔德

Answer 1

因为导出是default您不需要围绕导入组件名称的大括号:

import Hello from './hello';

以下是 Axel Rauschmayer关于最终ES6模块语法的详细技术文章,您可能会发现它很有用.

关于同一主题,这里的帖子略显逊色.

Answer 2

当您导入默认类时使用

import ClassName from 'something';

当您导入其他类时

import {ClassName} from 'something';

一个例子：

在hello.js文件中

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

class Other extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}
export default Hello;
export Other;

在其他文件中

import Hello, {Other} from './hello';

提示：您也可以使用其他名称导入默认类

import Component, {Other} from './hello';