export撞上解构赋值

导读

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';

为啥我之前一直不知道,估计是新出的语法,嗯,没错...

MDN export

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容