前端的进化-export撞上解构赋值

作者: 小遁哥 | 来源:发表于2020-04-18 19:32 被阅读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';
    

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

    MDN export

    相关文章

      网友评论

        本文标题:前端的进化-export撞上解构赋值

        本文链接:https://www.haomeiwen.com/subject/enkrvhtx.html