ReactNative之props基础用法+究极体验

标签: react-native props PropTypes
30人阅读 评论(0) 收藏 举报
分类:
注:本教程针对于有过React/ReactNative开发经验的人群。
一:基本使用
创建一个子组件。
export default class ItemProps extends Component {

导入这个组件并在render中使用。
在另一个组件中导入。
import ItemProps from '../pages/ItemProps';
export default class PropsPage extends Component {
使用:
let params = {
name : '小明',
phone : '1008611'
}
...
<ItemProps {...params} {...this.state} t = {this.state.text}/>

注:直接传参,新语法传参,传函数方法都是可以的,传父类方法子类调用更是可以的。

在item中使用:
render() {
let { name,phone,text,nullnull,t } = this.props;
直接接收使用就可以了

二:默认参数
用static修饰的defaultProps用来设置默认的props,就是在未拿到props之前显示的内容,不然未拿到值会显示und...
static defaultProps={ name: 'XiaoHong' }

三:参数使用state

在父类中改变这个state,子类中使用了this.state也会跟着改变。

四:约束检查

意思是在子组件设置约束,父组件向子组件传值时,会进行类型判断,如果异常会向控制台抛出异常信息,页面上也会有异常警告弹出。是黄色的异常,并非错误信息。
React.PropTypes自React V15.5起已经被移除了,这个在正式版本中是没有用的,反而会拖慢程序。
在开发过程中,这个还是很有用的。比如合作开发,另一个人不会用这个子组件可以一目了然。
React V15.5之后想使用的话需要导入prop-types包(npm install --save prop-types)

作用可以设定类型和是否必传(isRequired为必传)
/**
* 在这个约束检查里 phone要求number但是我传的是string,所以控制台会抛出类型异常。
*
*/
//React.PropTypes自 React v15.5 起就被移除了,因为约束检查在正式版本拖性能后腿。所以使用prop-types库来进行替换
//导入 npm install --save prop-types
//约束检查 isRequired参数是必选的意思
static propTypes = {
name: PropTypes.string.isRequired,
phone: PropTypes.number,
}

注:正式版本中,一定要记得注视调这些代码。

五:基于ES6的延伸操作符

不在赘述,基本使用中有详细的用法。
props支持延伸操作符传值
...params
props 解构
var {name, age} = params;


查看评论

零代码保存窗口运行状态

 零代码保存窗口运行状态    一些比较专业的软件都有自动保存窗口运行状态的功能,具体的方法都是在窗口关闭前将其状态保存到注册表中或ini文件中,而这些代码一般都是相同的,所以可以将其集中在一起,重复...
  • gnuljf
  • gnuljf
  • 2001-05-12 21:01:00
  • 788

ReactNative之state基础用法+究极体验

注:本教程针对于有过React/ReactNative开发经验的人群。本篇文章将对state做一个究极探究。知识点前瞻:1.state使用、React事务(transaction)、setState机...
  • sinat_30949835
  • sinat_30949835
  • 2018-04-16 15:46:05
  • 30

究极模块 Ver 4.0.1.ec破解版

  • 2012年07月24日 20:10
  • 818KB
  • 下载

魔鬼作坊 究极模块 4.0.1 (附注册机)

  • 2013年05月13日 19:49
  • 755KB
  • 下载

客所思KX2究极版搭载机架设置方法

  • 2017年06月26日 08:03
  • 546KB
  • 下载

reactNative学习笔记之Props属性

在android当中两个页面之间传递值,可以通过bundle,那么在reactNative中,是怎么传递的呢? 没错,就是通过Props,使用方法如下 首先在我们自己的页面通过{this.prop...
  • u010648159
  • u010648159
  • 2017-11-28 10:17:15
  • 135

究极模块 4.0.1及注册机

  • 2011年10月16日 20:23
  • 754KB
  • 下载

究极模块 魔鬼作坊模块5.8破解版

  • 2013年12月07日 14:55
  • 4.12MB
  • 下载

究极模块4.0.1及注册机

  • 2013年01月22日 08:54
  • 1.18MB
  • 下载

ReactNative入门之props与state

前一篇博客做了一个helloworld的简单例子。今天,继续RN之旅。学会props与state的使用之后,就可以做组件之间的传值和交互了。这对与RN开发来说十分关键。Props: 在java中创建...
  • ZACH_ZHOU
  • ZACH_ZHOU
  • 2017-01-04 11:08:50
  • 1389
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 499
    排名: 10万+
    文章存档
    最新评论