React使用PropTypes进行类型检测
来源:互联网 发布:nga 数据库 编辑:程序博客网 时间:2024/05/16 18:27
随着你的应用的变得越来越大,你可以通过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
。
阅读全文
0 0
- React使用PropTypes进行类型检测
- 使用=React.PropTypes进行类型检测
- 使用PropTypes进行类型检测
- 使用PropTypes进行类型检测
- 十三、使用PropTypes进行类型检测
- react用PropTypes检测类型
- 使用propTypes进行类型检查
- 浅谈React的类型检测——PropTypes
- 浅谈React的类型检测——PropTypes
- react.js-06-propTypes类型校验
- React组件属性类型(propTypes)
- React组件属性类型(propTypes)
- react PropTypes
- React.PropTypes
- React PropTypes 定义组件的属性类型和默认属性
- React之PropTypes
- React 的PropTypes
- react教程之PropTypes
- 反射--认识Class类
- 2017今日头条网招在线编程题(部分)
- php+中文分词scws+sphinx+mysql+只作为个人笔记,请点击下面链接到原地址查看
- [shell] eval
- DirectShow学习笔记
- React使用PropTypes进行类型检测
- JDBC批量向数据库插入数据(十)
- python<win10下使用定时任务执行爬虫程序>
- 一个分类方法:在降维的同时能增大类别分离度,在手写数字数据集及鸢尾花的图片数据集上做了对比试验
- Mysql 高级sql操作: DELETE,UPDATE与LEFT JOIN
- LeetCode 120. Triangle
- HashMap的工作原理
- 自定义Behvior(CoordinatorLayout)
- JS 中 new 操作符