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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
为输入框加入数字js校验代码分享
Nov 02 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
js实现抽奖功能
Nov 24 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中ob_flush函数和flush函数用法分析
2015/03/18 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php制作简单模版引擎
2016/04/07 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
iframe实用操作锦集
2014/04/22 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
python获得图片base64编码示例
2014/01/16 Python
python3.3实现乘法表示例
2014/02/07 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python骚操作之动态定义函数
2019/03/26 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
numpy 声明空数组详解
2019/12/05 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
Java基础面试题
2012/11/02 面试题
城市规划毕业生求职信
2013/10/10 职场文书
工作中的自我评价如何写好
2013/10/28 职场文书
财务助理岗位职责
2013/11/10 职场文书
《童趣》教学反思
2014/02/19 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Vue深入理解插槽slot的使用
2022/08/05 Vue.js