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

IT技术 javascript reactjs webpack webpack-dev-server
2021-04-29 05:23:47

我刚刚开始react并为自己尝试。经过几个小时的配置 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 中做所有事情时，它渲染得很好。它也编译得很好。但是现在控制台中有很多错误。那么我错过了什么？

谢谢

格尔德

2个回答

因为您的导出是default您不需要在导入组件名称周围使用大括号：

import Hello from './hello';

这是Axel Rauschmayer撰写的关于最终 ES6 module语法的详细技术文章，您可能会觉得有用。

这是关于同一主题的技术性稍差的帖子。

当您导入您使用的默认类时 

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';
其它你可能感兴趣的问题
上一篇打印小细杆的问题 下一篇美纹纸胶带的粘合问题