react native中props的使用
react native中props的使用
一、props的使用
1:父组件传递的方式
在子组件中可以用this.props访问到父组件传递的值
<View>
<Text>
{this.props.name}
</Text> </View>
父组件定义传递的值
<MyComponent name='小明'/>
2:子组件定义默认props(父组件未传值的情况使用)
static defaultProps = {
name: '小红'
}
二、props类型检查
为了其他组件传递值得时候,保持类型的准确,需要进行类型检查。
首先导入PropTypes
import propTypes from 'prop-types'
注意:propTypes已经从react中移除,需要单独导入。npm install prop-types下载依赖包。propTypes开头的p不需要大写。
然后定义类型检查
static propTypes = {
name: propTypes.number,
}
1:属性是指定的 JavaScript 基本类型:
属性: PropTypes.array,
属性: PropTypes.bool,
属性: PropTypes.func,
属性: PropTypes.number,
属性: PropTypes.object,
属性: PropTypes.string,
2:要求属性是可渲染节点
属性: PropTypes.node,
3:要求属性是某个 React 元素
属性: PropTypes.element
4:要求属性是某个指定类的实例
属性: PropTypes.instanceOf(NameOfAClass),
5:要求属性取值为特定的几个值
属性: PropTypes.oneOf(['value1', 'value2'])
6:要求属性可以为指定类型中的任意一个
属性: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.instanceOf(NameOfAClass),
])
7:要求属性为指定类型的数组
属性: PropTypes.arrayOf(PropTypes.number)
8:要求属性是一个有特定成员变量的对象
属性: PropTypes.objectOf(PropTypes.number)
9:要求属性是一个指定构成方式的对象
属性: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number,
}),
10:属性可以是任意类型
属性: PropTypes.any
11:上面描述的 10 种语法,都可以通过在后面加上 isRequired 声明它是必需的。
属性: PropTypes.array.isRequired,
属性: PropTypes.any.isRequired,
属性: PropTypes.instanceOf(NameOfAClass).isRequired,
三、延展操作符和解构赋值
1:延展操作符
如果父组件需要传递多个参数,而这些参数都存在一个对象里,我们可以使用延展操作符的方式传值。
render() {
let params = {
name : '小红',
age: 11
}
return (
<View>
<MyComponent {...params}/> </View>
);
}
2:解构赋值
当我们只需要取对象中部分属性传递
render() {
let params = {
name : '小红',
age: 12,
sex: '男'
}
let {name, age} = params
return (
<View>
<MyComponent name={name} age={age}/>
</View>
);
}
react native中props的使用的更多相关文章
- React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react native中state和ref的使用
react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...
- React Native中加载指示器组件ActivityIndicator使用方法
这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- react native 中的ListView
ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); con ...
随机推荐
- 19-3-8Python中编码的进阶、文件操作初识、深浅copy
编码的进阶 ASCII:英文字母,数字,特殊符号,——> 二进制的对应关系 Str: 1个字符——> 1个字节 Unicode:万国码:世界上所有的文字与二进制的对应关系 1个字符——& ...
- linux-2.6.22.6内核启动分析之head.S引导段代码
学习目标: 了解arch/arm/kernel/head.S作为内核启动的第一个文件所实现的功能! 前面通过对内核Makefile的分析,可以知道arch/arm/kernel/head.S是内核启动 ...
- 自学tensorflow——1.框架初步了解以及构建简单的计算图计算
1.初步了解 tensorflow是谷歌的一款开源深度学习框架.运行前,需要先定义好计算图,最后通过会话启动计算图,这么做的目的是为了防止数据在python和c++(tensorflow底层)传输的时 ...
- 编译Libuv
Libuv https://github.com/libuv/libuv LibSourcey是基于libuv,集合了第三方用于视频流的开源库,使用C++11. 下载最新 https://dist.l ...
- UVA 514 - Rails ( 铁轨)
from my CSDN: https://blog.csdn.net/su_cicada/article/details/86939523 例题6-2 铁轨(Rails, ACM/ICPC CERC ...
- MySQL - CentOS 下 MySQL 5.6 安装
1. 概述 最近没啥东西可写, 随便写点 mysql 5.6 的安装 去年写的 装上去过 三次以上 2. 准备 系统 CentOS 7.4 3. 安装 1. 直接安装 # mysql服务端: mysq ...
- Windows10下ghci无法使用的解决方案之一
遇到的问题:在安装Haskell Platform Core 8.4.3版本后,在命令行中输入ghci,使用该交互环境时报错. 报错信息如下:省略号是一系列类似ghci去各种路径查找都没找到的信息 G ...
- Oracle入门第五天(上)——数据库对象之视图
一.概述 1.什么是视图(VIEW) 视图 从表中抽出的逻辑上相关的数据集合(是一张虚表). 2.为什么使用视图 1.控制访问 2.简化查询 3.视图的分类 二.视图管理 1.创建视图 CREATE ...
- 20155211 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
20155211 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 步骤一(新建文件夹): ...
- 20155216 2016-2017-2 《Java程序设计》第二周学习总结
教材学习内容总结 类型 short占2字节 int占4字节 long占8字节 byte占1字节,可表示-128~127的整数 char占2字节 boolean不考虑占字节 float占4字节 doub ...