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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
jQuery实现动态操作table行
Nov 23 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
推荐一篇入门级的Class文章
2007/03/19 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php图像处理类实例
2015/07/28 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python变量赋值的秘密分享
2018/04/03 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
自定义django admin model表单提交的例子
2019/08/23 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
安全目标管理责任书
2014/07/25 职场文书
公民代理授权委托书
2014/09/24 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
先进典型发言材料
2014/12/30 职场文书
小英雄雨来观后感
2015/06/09 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
Django实现聊天机器人
2021/05/31 Python