prop-Types验证

import React from "react";
import PropTypes from "prop-types";class MyComponent extends React.Component {render() {// 利用属性做更多得事}
}MyComponent.propTypes = {// 你可以定义一个属性是特定的JS类型（Array,Boolean,Function,Number,Object,String,Symbol）。默认情况下，这些都是可选的。optionalArray: PropTypes.array,optionalBool: PropTypes.bool,optionalFunc: PropTypes.func,optionalNumber: PropTypes.number,optionalObject: PropTypes.object,optionalString: PropTypes.string,optionalSymbol: PropTypes.symbol,// 指定类型为：任何可以被渲染的元素，包括数字，字符串，react 元素，数组，fragment。optionalNode: PropTypes.node,// 指定类型为：一个react 元素optionalElement: PropTypes.element,// 你可以类型为某个类的实例，这里使用JS的instanceOf操作符实现optionalMessage: PropTypes.instanceOf(Message),// 指定枚举类型：你可以把属性限制在某些特定值之内optionalEnum: PropTypes.oneOf(["News", "Photos"]),// 指定多个类型：你也可以把属性类型限制在某些指定的类型范围内optionalUnion: PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message),]),// 指定某个类型的数组optionalArrayOf: PropTypes.arrayOf(PropTypes.number),// 指定类型为对象，且对象属性值是特定的类型optionalObjectOf: PropTypes.objectOf(PropTypes.number),// 指定类型为对象，且可以规定哪些属性必须有，哪些属性可以没有optionalObjectWithShape: PropTypes.shape({optionalProperty: PropTypes.string,requiredProperty: PropTypes.number.isRequired,}),// 指定类型为对象，且可以指定对象的哪些属性必须有，哪些属性可以没有。如果出现没有定义的属性，会出现警告。// 下面的代码optionalObjectWithStrictShape的属性值为对象，但是对象的属性最多有两个，optionalProperty 和 requiredProperty。// 出现第三个属性，控制台出现警告。optionalObjectWithStrictShape: PropTypes.exact({optionalProperty: PropTypes.string,requiredProperty: PropTypes.number.isRequired,}),// 加上isReqired限制，可以指定某个属性必须提供，如果没有出现警告。requiredFunc: PropTypes.func.isRequired,requiredAny: PropTypes.any.isRequired,// 你也可以指定一个自定义的验证器。如果验证不通过，它应该返回Error对象，而不是`console.warn `或抛出错误。`oneOfType`中不起作用。customProp(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error(`Invalid prop \`${propName}\` supplied to` +` \`${componentName}\`. Validation failed.`);}},// 你也可以提供一个自定义的验证器 arrayOf和objectOf。如果验证失败，它应该返回一个Error对象。// 验证器用来验证数组或对象的每个值。验证器的前两个参数是数组或对象本身，还有对应的key。customArrayProp: PropTypes.arrayOf((propValue, key, componentName, location, propFullName) => {if (!/matchme/.test(propValue[key])) {return new Error(`Invalid prop \`${propFullName}\` supplied to` +` \`${componentName}\`. Validation failed.`);}}),
};

prop-Types验证相关推荐

Vue.js Prop
Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camel ...
vue_prop注册及验证
目录 1.注册自定义特性 2.prop的大小写 3.传递给一个对象的所有属性 4.prop验证 1.注册自定义特性当我们在注册组件时,希望其结构.样式和行为是不变的,但是数据应该是可变的,也就是说, ...
vue2.0 prop的使用
个人觉得Prop的使用需要注意四点: 第一点: 使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名 HTML ...
vue的Prop属性
转载自 Prop Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中 ...
element手机验证格式_vue封装 element-ui form表单验证正则匹配手机号自定义校验表格内容...
效果 image.png 在methods中 //检查手机号 isCellPhone(val) { if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) { return f ...
prop与自定义事件
prop与自定义事件 1. prop 1-1 什么是prop prop 是你可以在组件上注册的一些自定义属性.当一个值传递给一个 prop 属性的时候,它就变成了那个组件实例的一个属性组件中 pro ...
vue中prop的用法
prop的大小写 HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase(驼峰命名法)的 prop ...
spring mvc + JSR-303验证框架
为什么80%的码农都做不了架构师?>>> http://www.cnblogs.com/liukemng/p/3738055.html 在系列(4).(5)中我们展示了如何绑定 ...
SpringMVC学习系列（6）之数据验证
在系列(4).(5)中我们展示了如何绑定数据,绑定完数据之后如何确保我们得到的数据的正确性?这就是我们本篇要说的内容 -> 数据验证. 这里我们采用Hibernate-validator来进行验 ...
SpringMVC学习系列（5）之数据验证
原文地址 http://www.cnblogs.com/liukemng/p/3738055.html 这里我们采用Hibernate-validator来进行验证,Hibernate-validat ...

prop-Types验证

prop-Types验证相关推荐

最新文章

热门文章