React.js 官网资料摘记:使用Prop-Types检查类型
来源:互联网 发布:python入门到精通 编辑:程序博客网 时间:2024/06/06 01:18
使用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'));
阅读全文
0 0
- React.js 官网资料摘记:使用Prop-Types检查类型
- React.js 官网资料摘记:JSX简介
- React.js 官网资料摘记:元素渲染
- React.js 官网资料摘记:组件&Props
- React.js 官网资料摘记:State & 生命周期
- React.js 官网资料摘记:事件处理
- React.js 官网资料摘记:条件渲染
- React.js 官网资料摘记:列表&keys
- React.js 官方资料摘记:状态提升
- React.js 官方资料摘记:深入JSX
- React.js 官方资料摘记:组合 VS 继承
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
- eslint: prop type 'object' is forbidden(react/forbid-prop-types)
- Laravel 5.4 官网资料摘记:Session
- React Native之prop-types进行属性确认
- React.js 官方文档摘记:表单
- react开发报错Use the prop-types package from npm instead.
- js的类型检查
- suse linux 系统下安装tomcat
- AJAX 执行顺序讨论之JavaScript权威指南第6版
- vue一.模板语法
- java中final修饰词的使用
- 如何成为牛逼的程序员
- React.js 官网资料摘记:使用Prop-Types检查类型
- 面向接口编程详解(一)——思想基础
- php redis安装使用
- Windows平台TCP通信程序实现-基于MFC CSocket类
- Implement Trie (Prefix Tree)
- iOS程序中的内存分配 栈区堆区全局区
- csdn 博客转载
- httpclient-访问https
- 奥威参展华南CIO大会 史上华南最大CIO交流盛典