为啥React组件export导出不生效?
主文件 app.js:
解决:export default 需要去掉大括号,即 mport Hello from './hello';
原因:当导入export default默认类时,无需大括号;导入使用其他类时,需要大括号。
举个例子,在 hello.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';
上一篇:npm安装报错:rollbackFailedOptional verb npm-session
下一篇:[es6] import, export, default cheatsheet