React-Native中props具体使用详解


Posted in Javascript onSeptember 04, 2017

props就是属性,是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。

使用props

通过上一个页面传递

新建一个 PropsTest.js 文件

exprot default class PropsTestextendesComponent{
  render(){
    return <Text>{this.props.name}</Text>
  }
}

在上一个页面中使用PropsTest组件

import PropsTest from './PropsTest'

<PropsTest 
  name = 'XiaoMing'
/>

注意: 上方代码,均为代码片段。

默认属性,以及它的作用

由于props的属性都是上个页面传递的,所以无法修改它。但是我们可以在PropsTest文件中,给props定义一些默认的值。

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

注意,defaultProps 需要使用static关键字来做静态修饰。这样,如果上个页面没有传值,则显示的是这个默认的属性。

对props进行约束和检查

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  static propTypes={
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

对props里面的属性进行类型判断,可以使用propTypes来做到,同样需要使用static关键字来修饰。

isRequired 可以指定必填项

注意:

propTypes属性 在 react 包中,需要先导入才能使用。

props延伸操作符

ES6的最新语法

假如我们的组件需要好多属性,如下:

params = {name: 'XiaoZhang', age: 18, sex: '男'}

// 如果需要传递给下一个页面需要:
<PropsTest
  name = {params.name}
  sex = {params.sex}
  age = {params.age}
/>
// 等等,这样如果属性特别多,代码将会变得难以维护。

在ES6中可以使用最新的延伸操作符特性

<PropsTest
  {...params}
/>

非常的简洁

props解构赋值

ES6的最新语法

通过延伸操作符传递的对象,在另一个组件中想要从中获取某几个来使用,可以用解构赋值的方式

var {name, age} = params;

// 其他地方就可以直接引用name和age了

{name}或{age}

// 这么做的好处,同样是不需要使用如下的传统方式

{params.name}或{params.age}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
javascript event 事件解析
Jan 31 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
js实现进度条的方法
Feb 13 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 #Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 #Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 #Javascript
JS实现页面内跳转的简单代码
Sep 03 #Javascript
初探JavaScript 面向对象(推荐)
Sep 03 #Javascript
jquery+css实现下拉列表功能
Sep 03 #jQuery
使用JavaScript实现点击循环切换图片效果
Sep 03 #Javascript
You might like
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
关于js datetime的那点事
2011/11/15 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
理解Python中的With语句
2015/02/02 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python:slice与indices的用法
2019/11/25 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
党支部公开承诺书
2014/03/28 职场文书
环保倡议书300字
2014/05/15 职场文书
市场营销专业求职信
2014/06/17 职场文书
运动会标语
2014/06/21 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
分享提高 Python 代码的可读性的技巧
2022/03/03 Python