react中使用prop-types检测props数据类型
时间:2019-06-14
本文章向大家介绍react中使用prop-types检测props数据类型,主要包括react中使用prop-types检测props数据类型使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、为什么使用prop-types
在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。
二、学习文档
https://www.npmjs.com/package/prop-types npm官网
https://reactjs.org/docs/typechecking-with-proptypes.html react官方
三、安装与引入
//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';
四、它可以检测的类型
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
五、使用isRequired设置属性为必须传递的值
static propTypes={
name:PropTypes.string.isRequired
}
六、使用defaultProps
TodoItem.propTypes = {
test:Proptypes.string.isRequired,
item : Proptypes.string,
deleteItem: Proptypes.func,
index : Proptypes.number
}
TodoItem.defaultProps = {
test:'hello'
}
原文地址:https://www.cnblogs.com/zhx119/p/11022426.html
- 一次对个人服务器入侵事件的调查
- BlackHat议题解析:Windows程序的数字签名校验“漏洞”
- 都是权限惹的祸 | 安卓恶意APP如何将其他APP中的私有数据搞到手
- SQLiScanner:又一款基于SQLMAP和Charles的被动SQL 注入漏洞扫描工具
- 逆向工厂(一):从hello world开始
- Android系统到底安不安全?细数Android7.0 Nougat的几大安全增强功能
- 冒用数字签名的对抗:亟需加强的签名审核
- Twitter开源云环境时间序列数据断层检测工具BreakoutDetection
- 用Python的长短期记忆神经网络进行时间序列预测
- 【问底】许鹏:使用Spark+Cassandra打造高性能数据分析平台(一)
- 隐秘通讯与跳板?C&C服务器究竟是怎么一回事
- 灵活布置、可二次开发的乌云公开漏洞及知识库搜索
- 干货 | 2014年我国大数据发展分析报告
- 这个恶意软件“奇葩”的反虚拟机技巧
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- k8s 架构、基本概念及命令
- Java API 连接 Hbase示例
- 点线图和阶梯图的画法
- 添加直线的两种方式
- nginx fastcgi模块ngx_http_fastcgi_module详细解析、使用手册、完整翻译
- Chrome代码调试指南
- Maven安装与配置
- CentOS7安装elk,并监控Nginx的access.log日志
- Aria2 + Rclone 实现离线下载 | 完美脚本配置 | 解决无法上传问题
- alpine使用的避坑指南
- elasticSearch学习(八)
- Python自学成才之路 魔术方法之比较运算符,赋值运算符
- Go语言(golang)新发布的1.13中的Error Wrapping深度分析
- 使用k8s容器钩子触发事件
- Python自学成才之路 魔术方法之属性访问控制