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使用的更多相关文章

  1. react Props 验证 propTypes,

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  2. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  3. React中的PropTypes详解

    propTypes用来规范props必须满足的类型,如果验证不通过将会有warn提示. React PropTypes的种类有: React.PropTypes.array // 队列 React.P ...

  4. 正式学习React(五) Reactjs 的 PropTypes 使用方法

    propTypes 使用來規範元件Props的型別與必需狀態 var Test = React.createClass({ propTypes: { // required requiredFunc: ...

  5. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  6. React Native 系列(六) -- PropTypes

    前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...

  7. React——props的使用以及propTypes

    组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...

  8. React的类型检测PropTypes

    React.propTypes:React.PropTypes 提供很多验证器来验证传入数据的有效性,当向props传入无效数据时,JavaScript 控制台会抛出警告. ; class MyTit ...

  9. React文档(十五)使用propTypes进行类型检查

    注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. 随着你的应用的开发,你会使用类型检查的方法来捕获很多bug.对于一些应用,你可以使 ...

  10. PropTypes验证器

    PropTypes用于对类型的验证,从而更加容易捕获bug.在React v15.5之前,它内置React.PropTypes函数帮助解决,之后放弃支持,采用prop-types库定义. import ...

随机推荐

  1. Python 函数(默认参数)

    默认参数 设置默认参数时,有两点需要注意:一是必选参数在前,默认参数在后,否则python的解释器会报错二是当函数有多个参数时,把变化大的参数放前面,变化小的放后面,变化小的参数就可以作为默认参数 d ...

  2. SQL中in参数在存储过程中传递及使用的方法

    背景: 1.使用存储过程 2.存储过程中有in 3.in括号里面的内容作为参数传递 解决方案: 1.直接拼接sql 可在存储过程中拼接字符串,然后执行此字符串,类似于js中的eval PROCEDUR ...

  3. [Artoolkit] kpmMatching & Tracking of nftSimple

    1. kpmMatching thread main() --> loadNFTData() --> trackingInitInit() --> In static void *t ...

  4. 【代码审计】大米CMS_V5.5.3 任意文件删除及代码执行漏洞分析

      0x00 环境准备 大米CMS官网:http://www.damicms.com 网站源码版本:大米CMS_V5.5.3试用版(更新时间:2017-04-15) 程序源码下载:http://www ...

  5. MapReduce处理HBase出错:XXX.jar is not a valid DFS filename

    原因:Hadoop文件系统没有检查路径时没有区分是本地windows系统还是Hadoop集群文件系统 解决:  只需将Map和Reduce的init方法最后一个参数(boolean addDepend ...

  6. 使用sts(SpringToolSuite4)无法将项目部署到tomcat容器

    一般情况下maven项目不能添加到tomcat容器中 ,需要在项目上进行设置 但是sts没有安装此插件,可以改用eclipse进行开发.

  7. Flask web开发之路十一

    首先写一下cookie和session的概念,然后是Flask中session的工作机制以及操作session ### cookie: 1. `cookie`出现的原因:在网站中,http请求是无状态 ...

  8. NPOI 自定义单元格背景颜色 XSSFWorkbook - Excel

    x 网上找到了,HSSFWorkbook自定义颜色的例子(讲的还挺细致的),但是XSSFWorkbook确没找到...研究了一下,坑掉了一地... NPOI.XSSF.UserModel.XSSFWo ...

  9. 泡泡一分钟:Motion Planning for a Small Aerobatic Fixed-Wing Unmanned Aerial Vehicle

    Motion Planning for a Small Aerobatic Fixed-Wing Unmanned Aerial Vehicle Joshua Levin, Aditya Paranj ...

  10. ubuntu16.04下安装opencv3.4.1及其扩展模块

    1.源文件下载 opencv-3.4.1.tar.gz(https://github.com/opencv/opencv/releases) opencv_contrib-3.4.1.tar.gz(h ...