为什么我的 React 组件导出不起作用？

Question

我刚刚开始做出反应并为自己尝试一下。经过几个小时的配置 webpack 只是为了在我的屏幕上显示一个 hello world，我想我现在可以开始了，但是在尝试从文件中渲染另一个组件之后，下一个问题出现了。

我的主文件是 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 的Here's a verbose technical article 介绍了您可能会发现有用的最终 ES6 模块语法。

And here's a slightly less techy post关于同一主题。

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';