react第九单元(propTypes验证)
第九单元(propTypes验证)
#课程目标
理解类型验证的必要性
灵活掌握类型验证的使用
#知识点
- 在给react组件传属性的的时候,我们可以定义属性的类型,此时我们需要下载
prop-types
这个库。
安装prop-types
npm install prop-types -S
引入和使用
import PropTypes from 'prop-types';
class Hello extends Component{
static propTypes = {
title: PropTypes.string.isRequired
}
}
// title属性的值必须是字符串且必传
基本的使用格式如下:
基本的类型验证如下
- PropTypes.array 类型应为数组
- PropTypes.bool 类型应为布尔
- PropTypes.func 类型应为函数
- PropTypes.number 类型应为数字
- PropTypes.object 类型应为对象
- PropTypes.string 类型应为字符串
- PropTypes.element 验证属性为React元素
- PropTypes.node 类型为React可以渲染的任何东西,数字,字符串,元素等等
- PropTypes.any 任何类型都可以
还有一些辅助方法
instanceOf 使用形式如下:
PropTypes.instanceOf(Array).isRequired
这个方法表示验证类型必须是某个类的实例,上述代码表示传入的参数必须是Array的实例;一般这个方法会接收一个类;oneOf 使用形式如下:
PropTypes.oneOf([‘news’,’photos’])
这个方法用来规定传入的属性必须是给定值中的一个,上述代码表示传入的值只能是’news’或者’photos’,一般该方法接收一个数组,数组的元素则为供选择的值oneOfType 使用形式如下
PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Array)
])
这个方法表示传入的参数可以使多种类型中的一个,上述代码表示传入的参数可以是字符串,数字或者一个Array的实例;一般该方法接收一个数组,数组的元素是规定传入参数的类型的;
arrayOf 用法如下:
PropTypes.arrayOf(PropTypes.string)
该方法表示传入的参数必须是某个类型的数组,上述代码表示传入的必须是一个字符串类型的数组,一般该方法接收一个验证类型;objectOf 用法如下
PropTypes.objectOf(PropTypes.string)
该方法表示传入的参数必须是某个类型的对象,上述代码表示传入的必须是一个字符串类型的对象,一般该方法接收一个验证类型;shape 用法如下:
PropTypes.shape({
color:PropTypes.string
fontSize:PropTypes.number
})
该方法规定传入的参数应该是一个特定的对象,上述代码表示传入的参数必须是对象,且应该有color属性其值是字符串,也应该有fontSize属性其值是数字;该方法接收一个对象,对象的属性值为验证类型;
前边提到的所有的类型都可以在最后添加isRequired标签,表示该属性必须存在;
自定义验证类型
当然React给我们预留了自己验证的方法,使用起来会更加的灵活;我么可以为要验证的属性添加一个函数,该函数会在验证的时候自动执行,并且接受几个参数;
propTypes:{
msg:function(props,propName,componentName){
if(!/matchme/.test(props[propName])){
return new Error(`${componentName}内的${propName}类型不正确`)
}
}
}
通过上述代码我们可以得知:该自定义的验证函数可以接收三个参数分别是:组件的属性(this.props)、当前正在验证的属性名、组件的名称;在函数内部我们可以书写验证逻辑,如果验证不通过,就返回一个Error类型的错误;
#授课思路
#案例和作业
react第九单元(propTypes验证)的更多相关文章
- 【React系列】Props 验证
Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效.当向 props 传入无效 ...
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...
- vue第九单元(非父子通信 events 单向数据流)
第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...
- React中的PropTypes详解
propTypes用来规范props必须满足的类型,如果验证不通过将会有warn提示. React PropTypes的种类有: React.PropTypes.array // 队列 React.P ...
- React 学习(二) ---- props验证与默认属性
在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...
- PropTypes验证器
PropTypes用于对类型的验证,从而更加容易捕获bug.在React v15.5之前,它内置React.PropTypes函数帮助解决,之后放弃支持,采用prop-types库定义. import ...
- react.js 表单验证-登录框
import React,{ Component } from 'react'; import style from 'cms.css'; /** * 路由路径 登录成功后页面跳转到index * ...
- react中使用prop-types检测props数据类型
一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...
- React中使用 PropTypes 进行类型检查
官方文档学习链接:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html import React, { Component ...
随机推荐
- ABBYY FineReader 15 安装教程
ABBYY FineReader 是一款出名的OCR文字识别工具,它包含文档转换.数据捕获等功能,文字识别率较高.能够带来快速.简单.易用的文字识别体验,从而提高工作效率.下面就为大家讲解ABBYY ...
- 利用MathType在Word里输入几何符号的技巧
通过学习几何学的知识,我们发现其中包含的几何符号有很多,比如有表示图形的符号,如三角形,平行四边形,圆,角,圆弧等:还有表示位置关系的符号,如平行,垂直等:还有表示矢量等其他符号,那这些符号怎么打出来 ...
- C++ cout格式化输出完全攻略
写算法题的时候突然发现自己忘记基本的C++:cout格式化输出了,赶紧拉出以前的C++学习笔记重新看一看. 部分内容来自教程:C语言中文网(一个很棒的网站) 有时希望按照一定的格式进行输出,如按十六进 ...
- [java基础]复习 java三大特性,异常,接口,String
继承 关键字extends 继承是为了不同的实现(龙生九子,各不相同) 单继承,一个类最多只能有一个父类 除了私有的外,子类可以访问父类的方法.属性. new过程中,父类先进行初始化,可通过super ...
- leetcode 493
//利用归并排序来完成,归并排序可参考前面代码,归并排序可用来完成这类逆序对之类的问题,采用分治的思想,对于归并排序的代码不需要多改动,只需要在归并之前进行一次寻找操作,找出count的数量 clas ...
- Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- spring mvc 文件上传报“由于没有提供multi-part配置,无法处理parts”
在使用springMVC进行文件上传时,报了HTTP 500的错. 才发现原来是在springmvc.xml配置文件中,multipart中的id写错了. 错误代码: <!-- 配置文件解析器- ...
- gsap基础一[from,to,fromTo]
学了几天基础了,感觉总算有点入了一个门的感觉啦,gasp不难,想想一年前我看着官网跟天文一样,今年真的进步很大,在外网发现学习的新世界, 自己的获取知识和查看api源码的能力也增强了许多,现在国内的气 ...
- PyQt(Python+Qt)学习随笔:Qt Designer中Action创建的方法
在Qt Designer中,可以两种方法创建Action对象,一种是菜单定义时,一种是单独定义. 一.定义菜单创建Action 在Qt Designer中创建菜单时,如果对应菜单是最终执行的菜单项,则 ...
- 巨经典论文!推荐系统经典模型Wide & Deep
今天我们剖析的也是推荐领域的经典论文,叫做Wide & Deep Learning for Recommender Systems.它发表于2016年,作者是Google App Store的 ...