关于RN组件的导出export和export default

原创 2016年11月14日 10:43:57

一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用。

组件导出的关键字是

exprot default

没有加default时,例如:

export class Template{}

当然,你可以在单个js文件里声明多个组件,例如Templates.js

export class Template{}
export class AnotherTemplate{}

这样在其他文件引用时,需要使用{}符号且组件名称必修和class名称一样,像这样子:

import {Template,AnotherTemplate} from './components/Templates';

而加default时,例如:

export default class Template{}

然后在其他文件引用,像这样子:

import Template from './components/Templates';

你也可以为这个组件另起一个别名,像这样子:

import TheTemplate from './components/Templates';

但是每个文件里只能有个default组件,可以包含其他非default组件:

export default class Template{}
export class AnotherTemplate{}

然后引用的时候,如下:

import Template,{AnotherTemplate} from './components/Templates';

总结

  • 有default和没有default的区别在于:有default在引用时可以自定义名称,而没有default时需要使用{}括起来且名称必修和class名称一致
  • 每个文件里只能有一个default组件,但可以有多个非default组件
版权声明:本文为博主原创文章,未经博主允许不得转载。

React-Native 组件的导出和导入

在React-Native 中如何自己定义一个组件是一件非常容易的事情。 下面是构建组件的几种方式。 在es6中主要的关键词 export default 进行修饰、之后我们就可以把自定义的组件被...

React Native入门——布局实践:开发京东客户端首页(一)

有了一些对React Native开发的简单了解,让我们从实战出发,一起来构建一个简单的京东客户端。 这篇文章会对京东客户端首页的布局进行简单的分析,并对搜索框部分的开发进行介绍,其他内容在后面的文章...

ReactNative进阶之react-native-storage的使用及封装

本篇博客将带大家展开reactnative中关于数据持久化存储的学习。其中涉及到了nodejs的语法的相关知识,也稍做介绍。好了,废话不多说。在androind中数据的持久化存储用的比较多的就是sha...

react-native 完整实现登录功能

react native实现登录功能,包括ui的封装、网络请求的封装、导航器的实现、点击事件。demo下载:react-native 完整实现登录功能1.完整目录2.实现的界面3.主界面的代码实现im...

React使用export导出类

React中使用export导出类可以有两种方法1. export default classname 这种导出方式与export default class classname extends Re...
  • naipeng
  • naipeng
  • 2017年08月08日 21:57
  • 1758

十分详细的React入门实例

学习React不是一蹴而就的事情,入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程。认真完成这个实例的...

新手关于 export default connect react-redux 的理解

由于是刚学js,到ReactJs,前期只能帮忙改改别人的项目,看到了React-Redux 顺便搜索了一下以下为个人理解,防止忘掉: ReactJs 的state(状态)里面的值,可以理解为全局变量,...

ES6入门 —— Class和Module

一、ClassES6引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。 // 定义类 class Point() { constructor...

JavaScript ES6中export及export default的区别

在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过`import+(常量 | 函数 | 文件 | 模块)名`...

ES6详解八:模块(Module)!

modules是ES6引入的最重要一个特性。 所以以后再写模块,直接按照ES6的modules语法来写,然后用 babel + browserify 来打包就行了。modules规范分两部分,一部分...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于RN组件的导出export和export default
举报原因:
原因补充:

(最多只允许输入30个字)