react中组件、变量常量、方法的导入导出总结即export 与 export defualt的区别

export 与 export defualt的区别总结

• export 可以有多个， export defualt只能有一个
• export的名称必须和定义名称一致，export defualt不用
• 导入时：export A对应import {A} from …
• 导入时：export defualt B对应import B from …
• 两者都有时： import B ，{A} from …

export 与 export defualt详细说明

组件

导出

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 // // 常亮
const x='string'
/*批量导出*/
export {x}或写多个export x

导入

import {name, age} from '......'

注意：这里import后面的名称必须和定义的相同；

方法

导出

export function sum(a, b){
    return (a + b)
}
function sum2(a, b){
    return (a + b)
}
export {sum2}或export sum2

导入

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
参考3-TypeScript 错误 “Module ‘…index’ has no default export”