前端的进化-export撞上解构赋值
2020-04-18 本文已影响0人
小遁哥
导读
export {default as CardModal } from './cardModal/cardModal'
如果你不幸知道了上面的知识点,文中70%都是废话了。
如果你与2020/4/18 19:24 左右读过MDN过于export
的文档,就可以默默退出去了,慢走!
正文
我有src/copmonent
的文件结构,用来存放React
组件,有个index.tsx
的文件,统一对外导出
import GroupModal from './groupModal/groupModal';
import CardModal from './cardModal/cardModal';
export default {
GroupModal,
CardModal
};
在使用的地方
import { GroupModal , CardModal } from '@/component';
然后告诉我找不见...,想了半天是和结构赋值搞混了
只能这样
const { AllComponent } = CardManagerComponent;
使用的时候
const {GroupModal , CardModal } = AllComponent;
<GroupModal />
<CardModal />
或者
<AllComponent.GroupModal />
<AllComponent.CardModal />
其实我一直想尝试如下写法
import GroupModal from './groupModal/groupModal';
import CardModal from './cardModal/cardModal';
export GroupModal ;
export CardModal ;
可现实它不允许啊!
那么问题来了,挖掘机学校哪家强!有点激动...
在某位大佬的指点下,看了antd
的导出,不看不知道,一看吓一跳
其实还可以这样
export {default as GroupModal } from './groupModal/groupModal'
export {default as CardModal } from './cardModal/cardModal'
然后就可以这样
import { GroupModal , CardModal } from '@/component';
为啥我之前一直不知道,估计是新出的语法,嗯,没错...