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 ...
随机推荐
- CorelDRAW中的3D线条表现方法
CorelDRAW图形设计工具的最优势之一是其强大的交互式工具. 调和工具就是这样一种互动性很强的工具,从表面上看来可能不是那么突出,但功能是真的强啊!一旦发现它的潜力,它很快就会成为经验丰富的Cor ...
- 模拟赛38 B. T形覆盖 大模拟
题目描述 如果玩过俄罗斯方块,应该见过如下图形: 我们称它为一个 \(T\) 形四格拼板 .其中心被标记为\(×\). 小苗画了一个 \(m\) 行 \(n\) 列的长方形网格.行从 \(0\) 至 ...
- QQ账号测试用例
- influxdb的基本使用
influxDB名词 database:数据库: measurement:数据库中的表: points:表里面的一行数据. influxDB中独有的一些概念 Point由时间戳(time).数据(fi ...
- 【???】今天上午的考试题——区间dp和字符串/线性筛的综合应用
T3还没有打出来,就先放两道. ---------------------------------------------------------- T1:密码破译 温温手下的情报部门截获了一封加密信 ...
- 6. Git工作流
6.1 git工作流理解 在项目开发过程中使用 Git 的方式 6.2 git工作流分类 集中式工作流 像 SVN 一样,集中式工作流以中央仓库作为项目所有修改的单点实体.所有修改都提交到 Maste ...
- Java集合【9】-- Vector源码解析
目录 1.Vector介绍 2. 成员变量 3. 构造函数 4. 常用方法 4.1 增加 4.2 删除 4.3 修改 4.4 查询 4.5 其他常用函数 4.6 Lambda表达式相关的方法 4.7 ...
- SpringBoot中的Tomcat是如何启动的?
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>s ...
- 【2020.12.02提高组模拟】A组反思
55,rk47 T1 赛时先想了\(trie\),想到不一定是前缀,然后就放弃转为打暴力 得分:\(RE22\) 正解是只用判断\(i\)与\(i+1\)的关系,那么只有两种情况,判断一下然后\(dp ...
- Linu之用户管理【useradd】【userdel】【usermod】【passwd】【权限】
linux下创建用户 1.用户的创建 • 简介 linux是一个多用户多任务的分时操作系统,每个用户都是在root下的一个子用户,拥有不同的权限.用户登入成功后可进入系统和自己的主目录. •实现账号的 ...