@[總結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 ‘…’

給模組起別名，目前未實際使用過

參考

參考1
參考2