首页 > 其他 > 详细

es6 export和import相关

时间:2017-02-23 23:55:27      阅读:400      评论:0      收藏:0      [点我收藏+]

在最近写的react项目中,把组件分离出单个文件以供使用,这里可以用export导出,再通过import在别的文件引入。通常的用法如下:

 

1,从A文件导出单个函数(也可是对象或原语),在B文件引入:

  在A文件使用export default导出需要在B文件使用的那个组件(比如Func组件) ==>  export default class Func extends React.Component {} 

  那么在B文件引入时,可以这样写 ==>  import FunName from ‘./B.js‘; ,然后在下面的代码中引用FunName即可。

  注意,这里的import的名字(FunName)可以随意取,因为export default作为默认导出,每个脚本只能导出一个,而导出的这个值会作为入口文件使用,不管起什么名字指的都是它咯。通常与A文件中组件名一样即可。

 

2,从A文件导出多于一个(包括一个)函数(也可是对象或原语),在B文件引入:

  这时,就不能使用export default了。

  比如A文件有两个组件Func1, Func2需要导出

export class Func1 extends React.Component{}

export class Func2 extends React.Component{}

  除了不写default与1没有区别,区别在于引入的写法不同。

  如果只引入Func1 ==>  import { Func1 } from ‘./B.js‘; 

  如果需要引入Func1、Func2两个组件 ==>  import { Func1, Func2 } from ‘./B.js‘; 

  需要注意的是,引入的组件名必须与导出文件中定义的组件名相同,且必须用花括号包起来

 

此外,还有module.exports导出方式,待我研究完毕再来补上。

 

参考资料:MDNstackoverflow

es6 export和import相关

原文:http://www.cnblogs.com/ruoji/p/6436153.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!