es6中export和export default的區別
- export與export default均可用于導出常量、函數、文件、模塊;
- 你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式,將其導入,以便能夠對其進行使用;
- 在一個文件或模塊中,export、import可以有多個,export default僅有一個;
- 通過export方式導出,在導入時要加{ },export default則不需要;
- 其實很多時候export與export default可以實現同樣的目的,只是用法有些區別。注意第四條,通過export方式導出,在導入時要加{ },export default則不需要。使用export default命令,為模塊指定默認輸出,這樣就不需要知道所要加載模塊的變量名。
React中使用export導出類可以有兩種方法
1. export default?classname
這種導出方式與export default class?classname?extends React.class相同
在其他文件中引用時采取如下方式
import?classname?form?path
例如:
Com.js
class Welcome extends React.Component{render(){return <h1> hello,{this.props.name}</h1>}
}function App(){return (<div><Welcome name="Sara"/><Welcome nmae="Peng"/></div>);
}export default App;
index.js
import App from './components/Com';
const element=<App/>;
ReactDOM.render(element, document.getElementById('root'));
2. export {classname1,classname2}
在其他文件中引用時采用如下方式
import {classname1,classname2} from?pathimport {classname1} //注意引用一個類時也要加上{}
例如:
class Welcome extends React.Component{render(){return <h1> hello,{this.props.name}</h1>}
}function App(){return (<div><Welcome name="Sara"/><Welcome nmae="Peng"/></div>);
}
export {Welcome,App};
index.js
import {App} from './components/Com';const element=<App/>;
ReactDOM.render(element, document.getElementById('root'));
?
作者:ZhaoYingChao88
原文:https://blog.csdn.net/ZYC8888...