九、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.stringfontSize: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类型的错误；

九、propTypes验证相关推荐

asp.net夜话之九：验证控件(上)
本篇要讲述的知识点如下: 数据验证介绍纯客户端脚本验证 asp.net验证控件概述 RequiredFieldValidator控件 CompareValidator控件 RangeVali ...
asp.net夜话之九：验证控件
本篇要讲述的知识点如下: 数据验证介绍纯客户端脚本验证 asp.net验证控件概述 RequiredFieldValidator控件 CompareValidator控件 RangeValidato ...
企业级 SpringBoot 教程（十九）验证表单信息
这篇文篇主要简述如何在springboot中验证表单信息.在springmvc工程中,需要检查表单信息,表单信息验证主要通过注解的形式. 构建工程创建一个springboot工程,由于用到了 web ...
JavaScript学习笔记(九）(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证整体代码二.layer弹出层 1.引入相 ...
prop-Types验证
import React from "react"; import PropTypes from "prop-types";class MyComponent ...
写给学生看的系统分析与验证笔记（九）——验证正则安全性(verifying regular safety properties)
目录正则安全性验证正则安全性总结之前我们将系统建模为了抽象的模型,并且刻画了相应的性质,现在终于到了模型检测最后一步--验证(verification) 如果我们将真实的系统建模为了TS,并且 ...
C语言程序设计教材九斗验证,C语言程序设计
图书简介本书严格遵循C语言标准,全面.系统地阐述了C语言的基本概念.语法和语义,以及C语言进行程序设计的方法和技术.内容包括数据类型.运算符和表达式.流程控制.数组.函数.指针.构造类型.文件和C+ ...
如何使用验证 React 道具PropTypes
Props 和 PropTypes 是在 React 组件之间传递只读属性的重要机制. 我们可以使用 React props(属性的缩写)将数据从一个组件发送到另一个组件.如果一个组件接收到错误类型的 ...
Shiro学习总结（4）——Shrio登陆验证实例详细解读
2019独角兽企业重金招聘Python工程师标准>>> 最终效果如下: 工程整体的目录如下: Java代码如下: 配置文件如下: 页面资源如下: 好了,下面来简单说下过程吧! 准备工 ...

九、propTypes验证

目标

知识点

九、propTypes验证相关推荐

最新文章

热门文章