React中的PropTypes是啥意思哇
来源:互联网 发布:游族网络 贴吧 编辑:程序博客网 时间:2024/04/30 05:04
在我们自己写了一个组件,我们需要验证别人在使用这个组件时,是不是提供了符合我们要求的参数,这时就可以使用组件类的PropTypes属性了。
var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; }});
上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。
var data = 123;ReactDOM.render( <MyTitle title={data} />, document.body);
这样一来,title属性就通不过验证了。控制台会显示一行错误信息。
Warning: Failed propType: Invalid prop
title
of typenumber
supplied toMyTitle
, expectedstring
.
此外,getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'Hello World' }; }, render: function() { return <h1> {this.props.title} </h1>; }});ReactDOM.render( <MyTitle />, document.body);
上面代码会输出”Hello World”。
以下是PropTypes的一些属性
MyComponent.propTypes = { // 你可以定义一个js原始类型的prop,默认请情况下,这是都是可选的 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol, // 任何可以渲染的东西:数字,字符串,元素或数组(或片段)。 optionalNode: React.PropTypes.node, // React元素 optionalElement: React.PropTypes.element, // 你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。 optionalMessage: React.PropTypes.instanceOf(Message), // 你可以通过将它作为枚举来确保你的prop被限制到特定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 可以是许多类型之一的对象 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 某种类型的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 具有某种类型的属性值的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 采取特定样式的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 你可以用`isRequired`来连接到上面的任何一个类型,以确保如果没有提供props的话会显示一个警告。 requiredFunc: React.PropTypes.func.isRequired, // 任何数据类型 requiredAny: React.PropTypes.any.isRequired, // 您还可以指定自定义类型检查器。 如果检查失败,它应该返回一个Error对象。 不要`console.warn`或throw,因为这不会在`oneOfType`内工作。 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: React.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 入门实例教程
以及张亚涛的React从入门到精通系列之(13)使用PropTypes进行类型检测
如有侵权立即删除
阅读全文
0 0
- React中的PropTypes是啥意思哇
- react PropTypes
- React.PropTypes
- React.PropTypes.number控制台报错说number是undefined
- React之PropTypes
- React 的PropTypes
- react教程之PropTypes
- React的PropTypes 验证
- React之PropTypes属性
- react-native PropTypes
- import {PropTypes} from 'react'; PropTypes is undefined
- SAP AG中的AG是啥意思?
- JAVA中的术语:句柄是啥意思
- python中的下划线是啥意思?
- React组件属性类--propTypes
- React组件的属性PropTypes
- React学习(六)PropTypes
- react用PropTypes检测类型
- * 文件操作与模板 编程题#1(Coursera 程序设计与算法 专项课程3 C++程序设计 郭炜、刘家瑛;OpenJudge)
- object类对象转换成int对象的两种方法
- Android中Calendar类的用法总结
- 泛型上下限与比较
- AtomicInteger类的理解与使用
- React中的PropTypes是啥意思哇
- 【转载】 使用Jlink作为电源为Open1081开发板供电
- 常用加密算法介绍--DES
- Python程序和Flask框架中使用SQLAlchemy的教程
- Struts2之文件上传(单文件/多文件)
- C语言中volatile、register、const、static、extern、 auto关键字的作用
- OpenCV 3.1 StereoBM 获取正确视差Dispariy
- ubuntu16.04安装mentuhost详细教程和问题的解决方法
- php打印输出空格以及echo中.和,的区别