react-import的用法

amyloverice

于 2018-06-04 17:39:00 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/amyloverice/article/details/80570543

前端专栏收录该内容

56 篇文章

订阅专栏

本文详细介绍了JavaScript中模块的导入导出方式，包括默认导出、命名导出及混合导出等不同场景下的使用方法，并说明了如何进行重命名导入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在B.js中引用A.js;

1

 
     import  
     A  
     from  
     './A' 
     ; 
    

此时A.js中必须有默认导出 export default；则import后面的命名可以随意取，因为总会解析到A.js中的export default；如

    1 
  
    2

 
     import  
     Aa  
     from  
     './A' 
     ; 
    
 
     import  
     AS  
     form  
     './A' 
     ; 
    

2.使用花括号的情形

1

 
     import  
     { 
     A 
     }  
     from  
     './A' 
     ; 
    

花括号中的名字必须是A.js中导出模块命名为A，如A.js中这样写道

1

 
     export  
     const  
     A 
     = 
     { 
     } 
     ; 
    

3.一个模块的默认导出只能有一个，但是命名导出可以有多个，如

1

 
     import  
     A 
     ,  
     { 
     MyA，MyX 
     }  
     from  
     './A' 
     ; 
    

导入‘A’文件里export的一个默认的组件，将其命名为A以及MyA MyX这两个非默认组件

4.导入时可以重命名，如

1

 
     import  
     A  
     as  
     Aa 
     , 
     { 
     MyA  
     as  
     MyAa 
     , 
     MyX  
     as  
     MyXa 
     }  
     from  
     './A' 
     ;   
    

从A中导出组件 A 改名为 Aa