propTypes 类型检测

自 React v15.5 起，React.propTypes已移入另一个包中，需要引入prop-types库使用。

如果没有安装，请执行以下命令安装依赖：

npm install prop-types --save

引入使用：

import propTypes from 'prop-types'

简单使用示例：

import React from 'react';
import PropTypes from 'prop-types';  // 引入prop-types库
class Page extends React.Component {render() {return (<h1>数值：{this.props.count}</h1>)}
}
Page.propTypes = {count: PropTypes.number  // 声明count为number类型，如果得到的值不是number类型将会报错
};
ReactDOM.render(<div><Page count={"name"}/>    // 传递一个字符串到 props.count </div>,document.getElementById('root')
);

上面例子中，将会报错：

因为类型已经声明了为number，但得到的不是期望类型number，所以报错

tips: 出于性能考虑，propTypes只会在开发模式中才会提示类型报错。

1、propType检测原始类型：

Page.propTypes = {name: PropTypes.string,    // 检测字符串类型status: PropTypes.bool,    // 检测布尔类型grade: PropTypes.number,    // 检测数字类型info: PropTypes.object,    // 检测对象类型action: PropTypes.func,    // 检测方法类型skill: PropTypes.array,    // 检测数组类型constant: PropTypes.symbol,    // 检测symbol类型
};

2、允许传入任何可以渲染的值

node: PropTypes.node,  // 允许任何可以渲染的元素

3、允许传入一个react元素

element: PropTypes.element,  // 允许传入一个react元素

4、是否实例化于Test构造函数

instanceOf: PropTypes.instanceOf(Test),     // 是否实例化于Test构造函数

5、传入的值是否其中的枚举值

sex: PropTypes.oneOf(["男", "女"]),   // 传入的值是否其中的枚举值

6、传入值类型是否其中的类型之一

typeOf: PropTypes.oneOfType([PropTypes.number,PropTypes.string,PropTypes.bool]),    // 传入值类型是否其中的类型之一

7、传入的值为数组并且组元素的值为指定的类型

arrayOf: PropTypes.arrayOf(PropTypes.number),    // 传入的值为数组并且组元素的值为指定的类型

8、传入的值为对象，并且对象中的元素为指定的类型

objectOf: PropTypes.objectOf(PropTypes.string),   // 传入的值为对象，并且对象中的元素为指定的类型

9、传入的值为对象，并且如果传入其中指定的属性，则属性值类型必须是指定的类型

shape: PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),  // 传入的值为对象，并且如果传入其中指定的属性，则属性值类型必须是指定的类型

10、传入的值为对象，并且如果该对象有属性，必须与指定的属性一致，否则不传，不能传入其他值

exact: PropTypes.exact({color: PropTypes.string, fontSize: PropTypes.number})

11、必填字段并且需要为指定类型值，否则会抛出错误

required: PropTypes.string.isRequired,

12、必填字段，没有限制类型，任何类型的值都可以

anyRequired: PropTypes.any.isRequired,

13、设置默认值，没有值传入时使用默认值

Page.defaultProps = {name: '没填写名字'
}

14、自定义类型检测

// 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。// 请不要使用 `console.warn` 或抛出异常，因为这在 `onOfType` 中不会起作用。customProp: function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error('Invalid prop `' + propName + '` supplied to' +' `' + componentName + '`. Validation failed.');}},// 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。// 它应该在验证失败时返回一个 Error 对象。// 验证器将验证数组或对象中的每个值。验证器的前两个参数// 第一个是数组或对象本身// 第二个是他们当前的键。customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {if (!/matchme/.test(propValue[key])) {return new Error('Invalid prop `' + propFullName + '` supplied to' +' `' + componentName + '`. Validation failed.');}})

参考文档：react官方文档

propTypes 类型检测相关推荐

react 中的propTypes类型检测
咋说了,可能跟 js本身弱类型语言有关吧, 当我们的react项目越来越庞大而又复杂的时候, 特别是那种公共组件,如果不限制类型可能会千奇百怪的往里面传入一些数据, 除非你的文档中很详细描述每个 ...
使用=React.PropTypes进行类型检测
使用PropTypes进行类型检测随着你的应用的变得越来越大,你可以通过typechecking来找到更多的bug. 对于某些应用,您可以使用JavaScript扩展(如Flow或TypeScrip ...
React基础—PropTypes类型检查
1. PropTypes类型检查自 React v15.5 起,React.PropTypes已移入另一个包中.请使用prop-types库代替. 这里使用的方式是手脚架方式创建的项目,即: > ...
原创 | 基于AI的智能急性颅内出血类型检测
作者:杨毅远本文约6400字,建议阅读10分钟本文介绍了通过AI技术检测急性颅内出血类型方面的知识. 颅内出血(颅骨内出血)是医疗领域严重的健康问题,需要快速且经常进行密集的医学治疗.在美国,颅内 ...
数据类型类型检测
原始类型: 基本类型:number string boolean null undifined object object分为 Function Array Date number string bo ...
JavaScript中类型检测
文章首发: http://www.cnblogs.com/sprying/p/4349426.html 本文罗列了一般Js类型检测的方法,是构建Js知识体系的一小块,这篇文章是我很早之前总结的. 一. ...
最安全的js类型检测
众所周知js内置的类型检测机制不可靠,比如typeof操作符,对于正则和数组检测时返回值都是object, 而使用instanceof检测类型时,虽然可以对正则和数组正常验证,但验证undefined ...
[react] 在React中我们怎么做静态类型检测？都有哪些方法可以做到？
[react] 在React中我们怎么做静态类型检测?都有哪些方法可以做到? flow 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
JavaScript学习笔记：类型检测
JavaScript学习笔记:类型检测 1.利用typeof检测数据类型注意:type of null,返回的不是"null",而是"object".type ...

propTypes 类型检测

propTypes 类型检测相关推荐

最新文章

热门文章