使用PropTypes进行类型检测
来源:互联网 发布:苏亚雷斯实况巅峰数据 编辑:程序博客网 时间:2024/05/22 10:49
使用PropTypes进行类型检测
随着你的应用的变得越来越大,你可以通过typechecking来找到更多的bug。 对于某些应用,您可以使用JavaScript扩展(如Flow或TypeScript)对整个应用程序进行类型检查。
即使你不使用这些,React也有一些内置的typechecking能力。 要在组件的props上运行typechecking,可以分配特殊的propTypes属性:
class Greeting extends React.Component { render() { return ( <h1>Hello {this.props.name}</h1> ) };}Greeting.propTypes = { name: React.PropTypes.string.isRequired};
React.PropTypes返回的是一系列验证函数,用于确保接收的数据类似是否是有效的。
在这个例子中,我们使用React.PropTypes.string.isRequire检测name是否为字符串,并且是必填的。
当为prop提供无效值时,JavaScript控制台中将显示警告。 出于性能原因,仅在开发模式下检查propTypes。
React.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.PropTypes.element,您可以指定只有一个子元素可以作为内容传递的组件。
class MyComponent extends React.Component { render() { // 只能包含一个子元素,否则会给出警告 const children = this.props.children; return ( <div>{children}</div> ); }}MyComponent.propTypes = { children: React.PropTypes.element.isRequired}
设置Prop默认值
您可以通过使用defaultProps属性来定义props的默认值:
class Greeting extends React.Component { render() { return <h1>hello {this.props.name}</h1>; };}// 如果name没有传值,则会将name设置为默认的zhangyataoGreeting.defaultProps = { name: 'zhangyatao'}// 会渲染处<h1>hi zhangyatao</h1>ReactDOM.render( <Greeting />, document.getElementById('root'))
如果父组件没有设置并传入name,defaultProps将确保this.props.name将有一个默认值。 propTypes类型检查发生在defaultProps解析之后,因此类型检查也将应用于defaultProps。
原文出处:https://segmentfault.com/a/1190000007814801
阅读全文
0 0
- 使用PropTypes进行类型检测
- 使用PropTypes进行类型检测
- 十三、使用PropTypes进行类型检测
- React使用PropTypes进行类型检测
- 使用=React.PropTypes进行类型检测
- 使用propTypes进行类型检查
- react用PropTypes检测类型
- 浅谈React的类型检测——PropTypes
- 浅谈React的类型检测——PropTypes
- propTypes的使用
- react.js-06-propTypes类型校验
- React组件属性类型(propTypes)
- React组件属性类型(propTypes)
- 使用cvHoughCircles进行圆检测
- 使用IVersionedWorkspace进行版本检测
- React PropTypes 定义组件的属性类型和默认属性
- 使用模板进行类型转换
- 如何使用Jprofiler工具进行内存检测
- ABAP Debug SU01D to get SAP_ALL
- 返回成功判断的 几种状态
- shell在进行字符串截取的过程中,报的错bad substitution 解决办法
- php 解决 约瑟夫环
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- 使用PropTypes进行类型检测
- 缓存文件FileOutputStream ObjectOutputStream
- F2上的8×8可逆矩阵的个数为2的62次幂
- 浅谈jvm
- 【java基础】04.反射
- 音视频专家成长道路
- (零)angular2----online
- (数据结构)非比较排序-计数排序、基数排序的分析与实现
- IntelliJ IDEA 2017 下载和破解方法