react用PropTypes检测类型
来源:互联网 发布:求暖床软件怎么样 编辑:程序博客网 时间:2024/05/17 08:04
用PropTypes
检测类型
注意:
React v15.5.
已经把React.PropTypes
分离了,请用prop-types
库替代
npm install --save prop-types
项目做大了后经常就会出现类型错误的bug
,平时可以用JS插件
如Flow
,TypeScript
检测。如果不用这些插件的话,React
也提供了检测工具,给某个组件检测props
类型时,可以给他扩展一个propTypes
属性:
import PropTypes from 'prop-types';class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); }}// name只能是字符串Greeting.propTypes = { name: PropTypes.string};
如果类型不是字符串的时候就会报错,这种检测只在生产环境中使用
PropTypes
以下是默认类型
import PropTypes from 'prop-types';MyComponent.propTypes = { // You can declare that a prop is a specific JS primitive. By default, these // are all optional. optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, // Anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types. optionalNode: PropTypes.node, // A React element. optionalElement: PropTypes.element, // You can also declare that a prop is an instance of a class. This uses // JS's instanceof operator. optionalMessage: PropTypes.instanceOf(Message), // You can ensure that your prop is limited to specific values by treating // it as an enum. optionalEnum: PropTypes.oneOf(['News', 'Photos']), // An object that could be one of many types optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]), // An array of a certain type optionalArrayOf: PropTypes.arrayOf(PropTypes.number), // An object with property values of a certain type optionalObjectOf: PropTypes.objectOf(PropTypes.number), // An object taking on a particular shape optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }), // 每个类型后面跟 `isRequired` 表示props一定要有这个类型,否则报错 requiredFunc: PropTypes.func.isRequired, // A value of any data type requiredAny: PropTypes.any.isRequired, // You can also specify a custom validator. It should return an Error // object if the validation fails. Don't `console.warn` or throw, as this // won't work inside `oneOfType`. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( 'Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.' ); } }, // You can also supply a custom validator to `arrayOf` and `objectOf`. // It should return an Error object if the validation fails. The validator // will be called for each key in the array or object. The first two // arguments of the validator are the array or object itself, and the // current item's key. 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.' ); } })};
限制一个child
传入的props。children
只能包含一个兄弟元素(独生子)
,否则报错。可以有子元素
。
import PropTypes from 'prop-types';class MyComponent extends React.Component { render() { // 必须是一个元素否则报错 const children = this.props.children; return ( <div> {children} </div> ); }}MyComponent.propTypes = { children: PropTypes.element.isRequired};
prop
默认值
用defaultProps
给prop
设置默认值
class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); }}// s设置默认值Greeting.defaultProps = { name: 'Stranger'};// 渲染结果 "Hello, Stranger":ReactDOM.render( <Greeting />, document.getElementById('example'));
默认值是为了确保父调用组件时没有传递props
值而设置的一个默认展示结果。类型检测是在解析完默认值执行,所以类型检测依然对defaultProps
有效
阅读全文
0 0
- react用PropTypes检测类型
- React使用PropTypes进行类型检测
- 使用=React.PropTypes进行类型检测
- 浅谈React的类型检测——PropTypes
- 浅谈React的类型检测——PropTypes
- 使用PropTypes进行类型检测
- 使用PropTypes进行类型检测
- react.js-06-propTypes类型校验
- React组件属性类型(propTypes)
- React组件属性类型(propTypes)
- 十三、使用PropTypes进行类型检测
- react PropTypes
- React.PropTypes
- React PropTypes 定义组件的属性类型和默认属性
- React之PropTypes
- React 的PropTypes
- react教程之PropTypes
- React的PropTypes 验证
- JavaScript中typeof的使用
- sql注入原理及解决方案
- Android通用流行框架大全
- ScrollView中Spinner问题
- Codeforces 593D-Happy Tree Party
- react用PropTypes检测类型
- 170914_算法导论学习(二)_2.2 分析算法
- DFS:257. Binary Tree Paths
- 运维自动化之ansible的安装与使用
- javamail 邮件发送
- eclipse 搭建Android开发环境 安装ADT 24.0.2
- C++友元函数访问类的私有成员
- android adb connnect 连接失败问题
- Python中的增删改查