react中元件、變數常量、方法的匯入匯出總結
阿新 • • 發佈:2018-11-16
@[總結react中元件、變數常量、方法的匯入匯出)
元件
匯出
export default class Component extends Component{
render(){
return (<div>Hello, World.</div>)
}}
}
匯入
import Component from '.......'
注意:這裡import後面的名稱可以隨便起,因為總會解析到export default;
變數常量
匯出
export let name = 'wangcai' ; // 變數
export const age = 2 // // 常亮
/*批量匯出*/
export {name, age}
匯入
import {name, age} from '......'
注意:這裡import後面的名稱必須和定義的相同;
方法
匯出
export function sum(a, b){
return (a + b)
}
匯入
import {sum} from '.......'
注意:這裡import後面的名稱必須和定義的相同;
總結
export default (預設匯出)的模組使用 import C from ‘…’ 且C不一定和定義的模組相同但我們通常習慣保持一致,而export(非預設匯出)的模組必須import {C} from '…'且C必須是和定義的一致。一個模組的預設匯出只有一個,命名匯出可以有多個,當一個模組即有預設匯出又有命名匯出時可以匯出如下:
匯出
export default class Component extends Component{
export let name = 'wangcai'; // 變數
export const age = 2 // // 常亮
render(){
return (<div>Hello, World.</div>)
}}
}
匯入
import Component,{name,age } from '.......'
// 或
import myComponent,{name,age } from '.......'
附加
import * as C from ‘…’
匯入所有並起一個別名
import * as ReactDOM from 'react-dom'
ReactDOM.render()
import A as C from ‘…’
給模組起別名,目前未實際使用過