PropTypes使用
PropTypes防止后期代码传参数错误,所以加一个校验,

代码:
import React, {Component,PropTypes} from 'react';
import {View, Text, StyleSheet,TouchableOpacity} from 'react-native';
class CustomView extends Component {
static propTypes = {
name:PropTypes.string.isRequired,//姓名 isRequired必填项
like:PropTypes.array,//爱好
age:PropTypes.number,//年龄
adult:PropTypes.bool,//是否成年
sex: PropTypes.oneOf(['man', 'woman']),//性别
eat:PropTypes.func,//吃饭
object:PropTypes.shape({a: PropTypes.string, b: PropTypes.number}),//指定形式
arrayOf: PropTypes.arrayOf(PropTypes.number),//指定类型的数组
oneOfType: PropTypes.oneOfType([//指定其中一种类型
PropTypes.string,
PropTypes.number,
]),
objectOf: PropTypes.objectOf(PropTypes.number),//指定某种对象
}
eat(value){
this.props.eat("banana");
}
render() {
return (
<View style={styles.container}>
<Text>name:{this.props.name}</Text>
<Text>like:{this.props.like}</Text>
<Text>age:{this.props.age}</Text>
<Text>adult:{this.props.adult}</Text>
<Text>sex:{this.props.sex}</Text>
<Text>shape:a:{this.props.object.a}b:{this.props.object.b}</Text>
<Text>arrayOf:{this.props.arrayOf}</Text>
<Text>oneOfType:{this.props.oneOfType}</Text>
<Text>objectOf:{this.props.objectOf}</Text>
<TouchableOpacity onPress={()=>this.eat("banana")}>
<Text>eat</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems:'center',
justifyContent: 'center'
},
});
使用:
eat(value){
alert(value)
}
render() {
return (
<CustomView
name="lpp"
like={['画画','唱歌']}
age={19}
adult={true}
sex="man"
object={{a:"aa",b:12}}
arrayOf={[1,2,3,4,5,6]}
oneOfType="好人"
objectOf={[5,6,8,9]}
eat={(value)=>this.eat(value)}
/>
);
}
/**
any: createAnyTypeChecker(),
element: createElementTypeChecker(),
instanceOf: createInstanceTypeChecker,
node: createNodeChecker(),
object: createPrimitiveTypeChecker('object'),
symbol: createPrimitiveTypeChecker('symbol'), string: createPrimitiveTypeChecker('string'),
array: createPrimitiveTypeChecker('array'),
number: createPrimitiveTypeChecker('number'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
shape: createShapeTypeChecker
oneOf: createEnumTypeChecker,
arrayOf: createArrayOfTypeChecker,
objectOf: createObjectOfTypeChecker,
oneOfType: createUnionTypeChecker, */
PropTypes使用的更多相关文章
- react Props 验证 propTypes,
<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...
- React组件属性部类(propTypes)校验
React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...
- React中的PropTypes详解
propTypes用来规范props必须满足的类型,如果验证不通过将会有warn提示. React PropTypes的种类有: React.PropTypes.array // 队列 React.P ...
- 正式学习React(五) Reactjs 的 PropTypes 使用方法
propTypes 使用來規範元件Props的型別與必需狀態 var Test = React.createClass({ propTypes: { // required requiredFunc: ...
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...
- React Native 系列(六) -- PropTypes
前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...
- React——props的使用以及propTypes
组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...
- React的类型检测PropTypes
React.propTypes:React.PropTypes 提供很多验证器来验证传入数据的有效性,当向props传入无效数据时,JavaScript 控制台会抛出警告. ; class MyTit ...
- React文档(十五)使用propTypes进行类型检查
注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. 随着你的应用的开发,你会使用类型检查的方法来捕获很多bug.对于一些应用,你可以使 ...
- PropTypes验证器
PropTypes用于对类型的验证,从而更加容易捕获bug.在React v15.5之前,它内置React.PropTypes函数帮助解决,之后放弃支持,采用prop-types库定义. import ...
随机推荐
- Unity Remote远程调试
http://www.cnblogs.com/qinghuaideren/p/3623368.html http://blog.csdn.net/u012741077/article/details/ ...
- gradle教程 [原创](eclipse/ADT下 非插件 非Android Studio/AS)纯手打 第二篇:gradle简单实战
一个bug 一个脚印的叫你们用gradle. 1介于网络上的很多资料都是老的 不适用与现在的新版本gradle 尤其是有些gradle方法改名了老的用不了 2介于网上都是粘贴复制并且零碎我很蛋疼啊,走 ...
- [Tensorflow] Object Detection API - prepare your training data
From: TensorFlow Object Detection API This chapter help you to train your own model to identify obje ...
- 返回一个数组升序排列后的位置信息--C#程序举例
返回一个数组升序排列后的位置信息--C#程序举例 返回某一个数组升序排序后的位置 比如:{8,10,9,11}排序后应该是{8,9,10,11},但是需要返回{1,3,2,4} 大概记忆里是这么 ...
- [原]Jenkins(十三)---jenkins用户权限管理
* 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5337874.html 两种策略的比较
- Linux模拟网络延迟、丢包等
一.工具介绍 1.netem netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带宽.传输延迟.丢 ...
- ssh登录慢解决办法
这两天ssh登录局域网的一台服务器非常慢,严重影响工作效率,怎么办?查了一下网上的解决办法,总结一下: 使用命令ssh -v xxx@x.x.x.x 可以看到debug信息,找到问题出在哪: debu ...
- Windows 10 Install rabbitmq-server-3.6.9
rabbitmq下载 http://www.rabbitmq.com/releases/rabbitmq-server/v3.6.9/rabbitmq-server-3.6.9.exe otp插件下载 ...
- js中if语句的几种优化代码写法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法. 一.使用常见的三元操作符 复制代码 代码如下: if (foo) bar(); ...
- oracle中如何生成awr报告
oracle中如何生成awr报告 1.进入数据库 sqlplus / as sysdba 2.查看用户 show parameter db_name 3.开始压测后执行 exec DBMS_WOR ...