首页 > 代码库 > Advanced Guide--Typechecking with PropTypes
Advanced Guide--Typechecking with PropTypes
<style>p,pre,span,div,code { font-size: 16px }</style>
React拥有内置的类型检测机制,为组件的props运行类型检测,需要制定propTypes属性:
class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Greeting.propTypes = { name: React.PropTypes.string };
React.PropTypes输出一系列的验证器,用以确保你收到的数据是合法的。
一、React.PropTypes
下面是一个例子记录了不同的验证器;
MyComponent.propTypes = { // 你可以声明一个prop是特定的JS原始数据 // 默认情况下这些都是可选的 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, // 任何可以被渲染的事物:numbers, strings, elements or an array // (or fragment) containing these types. optionalNode: React.PropTypes.node, // A React element. optionalElement: React.PropTypes.element, // 声明一个prop是某个类的实例,用到了JS的instanceof运算符 optionalMessage: React.PropTypes.instanceOf(Message), // 你可以使用enum来确保你的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’,来确保prop必须有值 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对象 // 在array或者object中,验证器对于每个key都会被调用The first two // 验证器的前两个arguments是array或者object自身以及当前的key值 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.‘ ); } }) };
Advanced Guide--Typechecking with PropTypes
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。