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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
vue v-on监听事件详解
May 17 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
用最简单的方法判断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
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP中的替代语法介绍
2015/01/09 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python多继承顺序实例分析
2018/05/26 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python读取ini配置文件过程示范
2019/12/23 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
NumPy统计函数的实现方法
2020/01/21 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
课外小组活动总结
2014/08/27 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
毕业赠语大全
2015/06/23 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL