为啥React组件export导出不生效?

来源:清泛编译     2021-06-03 18:48:11    人气:     我有话说( 0 人参与)

当导入export default默认类时,无需大括号;导入使用其他类时,需要大括号。

主文件 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;
运行报错。

解决export default 需要去掉大括号,即 mport Hello from './hello';
原因:当导入export default默认类时,无需大括号;导入使用其他类时,需要大括号。
举个例子,在 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';

react component export

本文源自互联网,采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可,
版权归原作者,如有问题请联系service@tsingfun.com (编辑:admin)
分享到: