从零一起学react(6)---props属性验证v16.0.0
来源:互联网 发布:vc mfc编程登录界面 编辑:程序博客网 时间:2024/06/04 19:18
前言
在之前使用过React.PropTypes.string.isRequired,但是出错了,现在原因找到了,原来官网已经注明了:
注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。
所以需要引入 prop-types 库,如下:
import PropTypes from 'prop-types'; //ES6////我们之前一直使用的是<script>标签引入,可引入如下标签<script src="https://unpkg.com/prop-types/prop-types.js"></script>//或者<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
简单使用
下面我们可以先敲一个例子。
class Hello extends React.Component { render() { return <h1>{this.props.message}</h1>; }}Hello.propTypes = { message: PropTypes.string};var data="hello";// var data = 11;ReactDOM.render( <Hello message={data}/>, document.getElementById('test'));
这个例子在message为string类型时,没有问题,当message为其他类型(如number)时,控制台会产生如下warning。
Warning: Failed prop type: Invalid prop
message
of typenumber
supplied toHello
, expectedstring
.
我们还可以在后面加上isRequired如下:
Hello.propTypes = { message: PropTypes.string.isRequired}
这样的话,如果该组件没有提供message属性,会打印警告信息。而前面的例子中,没有message属性并不会打印警告。
Warning: Failed prop type: The prop
message
is marked as required inHello
, but its value isundefined
.
所有验证器
下面是react官网所有的验证器的例子:
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.' ); } })};
阅读全文
0 0
- 从零一起学react(6)---props属性验证v16.0.0
- 从零一起学react(4)---组件的props和state
- 从零一起学react(1)---HelloWorld
- 从零一起学react(7)---Create React App简介
- 从零一起学react(2)---JSX语法进阶
- 从零一起学react(3)---组件的创建
- 从零一起学react(5)---组件的生命周期
- 从零一起学react(8)---表单的使用
- React 之props属性
- 一起从零学Kotlin-20170728
- 一起从零学Kotlin-20170730
- 一起从零学Kotlin-20170801
- 一起从零学Kotlin-20170803
- 一起从零学Kotlin-20170805
- React Native之Props属性
- React 认知 四 Props 属性
- React-Native 属性设置props
- 和我一起从零学 WorkFlow 引言
- [QT]QMessageBox 的四种用法
- Qt-获取主机网络信息
- 完全平方数 BZOJ
- JDK 8新特性LongAdder和AtomicLong的性能测试对比
- java核心技术卷 之泛型程序设计
- 从零一起学react(6)---props属性验证v16.0.0
- PostgreSQL在非默认的路径下创建表空间及数据库后,删除数据库目录后,还需要删除pg_tblspc下的链接文件,否则尝试启动其他实例时会报错
- iOS面试题
- 用Vue.js实现全选与全不选删除功能
- nodejs zip压缩版安装与配置
- struts2上传文件显示进度条实例---有图有代码,一看就会
- 字符串转json数组
- 51nod 1076 2条不相交的路径(边双连通分量)
- 使用Qt插件在Qt中进行ROS开发