React.js 官网资料摘记:使用Prop-Types检查类型
2017-06-21 10:53
603 查看
使用PropTypes进行类型检查
这里有一个我不认识的javascript数据类型:symbol
一般情况下,如果检查过程中数据出现不符合的情况,会显示在浏览器的控制台中。也可以直接抛出错误
Error,再来在外部搭配
try catch,抓取错误。下面是官网例子:
import PropTypes from 'prop-types'; MyComponent.propTypes = { // 你可以将属性声明为以下 JS 原生类型 optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, // 任何可被渲染的元素(包括数字、字符串、子元素或数组)。 optionalNode: PropTypes.node, // 一个 React 元素 optionalElement: PropTypes.element, // 你也可以声明属性为某个类的实例,这里使用 JS 的 // instanceof 操作符实现。 optionalMessage: PropTypes.instanceOf(Message), // 你也可以限制你的属性值是某个特定值之一 optionalEnum: PropTypes.oneOf(['News', 'Photos']), // 限制它为列举类型之一的对象 optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]), // 一个指定元素类型的数组 optionalArrayOf: PropTypes.arrayOf(PropTypes.number), // 一个指定类型的对象 optionalObjectOf: PropTypes.objectOf(PropTypes.number), // 一个指定属性及其类型的对象 optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }), // 你也可以在任何 PropTypes 属性后面加上 `isRequired` // 后缀,这样如果这个属性父组件没有提供时,会打印警告信息 requiredFunc: PropTypes.func.isRequired, // 任意类型的数据 requiredAny: PropTypes.any.isRequired, // 你也可以指定一个自定义验证器。它应该在验证失败时返回 // 一个 Error 对象而不是 `console.warn` 或抛出异常。 // 不过在 `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: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( 'Invalid prop `' + propFullName + '` supplied to' + ' `' + componentName + '`. Validation failed.' ); } }) };
上面这个
prop-types的函数库的链接地址我没有找到。
设置默认值
这个可以直接使用:class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } // 为属性指定默认值: Greeting.defaultProps = { name: 'Stranger' }; // 渲染 "Hello, Stranger": ReactDOM.render( <Greeting />, document.getElementById('example') );
相关文章推荐
- React文档(十五)使用propTypes进行类型检查
- React.js 官网资料摘记:元素渲染
- react的类型检查(PropTypes)
- React.js 官网资料摘记:JSX简介
- React.js 官网资料摘记:事件处理
- React.js 官网资料摘记:列表&keys
- React.js 官网资料摘记:条件渲染
- React.js 官网资料摘记:State & 生命周期
- react.js-06-propTypes类型校验
- React.js 官网资料摘记:组件&Props
- React.js 官方资料摘记:状态提升
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
- react-native 组件默认属性(defaultProps) 及 属性类型验证(PropTypes)
- React PropTypes 定义组件的属性类型和默认属性
- React组件属性类型(propTypes)
- React.js 官方资料摘记:深入JSX
- React——props的使用以及propTypes
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
- React组件属性类型(propTypes)
- Atitit react 详细使用总结 绑定列表显示 attilax总结 1. 前言 1 1.1. 资料数量在百度内的数量对比 1 1.2. 版本16 v15.6.1 1 1.3. 引入js 2