propTypes与defaultTypes解析
程序员文章站
2023-12-29 17:13:10
proptypes:
为防止父给子组件传递的参数不是子组件期望的参数类型而导致程序运行错误,在子组件中可以对父组件传递过来的参数进行校验,使用的就是proptypes。
使用方...
proptypes:
为防止父给子组件传递的参数不是子组件期望的参数类型而导致程序运行错误,在子组件中可以对父组件传递过来的参数进行校验,使用的就是proptypes。
使用方法:
import proptypes from 'prop-types'; class greeting extends react.component { render() { return (
hello, {this.props.name}
); } } greeting.proptypes = { name: proptypes.string };引入proptypes,调用组件proptypes属性对参数进行校验。proptypes导出一系列验证器,可用于确保您收到的数据有效。在这个例子中,我们正在使用proptypes.string(要求参数是字符串类型的)。如果为prop提供了无效值,则会在javascript控制台中显示警告。出于性能原因,proptypes仅在开发模式下进行检查。
验证器还有:
proptypes.array proptypes.bool proptypes.func proptypes.number proptypes.object proptypes.symbol proptypes.node proptypes.element proptypes.instanceof(类名) proptypes.oneof([可选值列表]) proptypes.oneoftype([proptype.string,....]):许多类型中的一种 proptypes.arrayof([]);可以是哪些类型 proptypes.objectof();具有特定类型的属性值的对象 链式操作表示此参数是必须的:eg:proptypes.array.isrequired表示此参数为一个数组类型的且必须存在
defaultprops:
defaultprops:为参数定义默认值
class greeting extends react.component { render() { return (
hello, {this.props.name}
); } } // specifies the default values for props: greeting.defaultprops = { name: 'stranger' }; // renders "hello, stranger": reactdom.render(为name定义默认值为字符串stranger当父组件没有向子组件传递name属性值时name为默认值。
所以类型检查也将适用于defaultprops。
推荐阅读
-
propTypes与defaultTypes解析
-
解析mysql二进制日志处理事务与非事务性语句的区别_MySQL
-
深入解析MapReduce架构设计与实现原理–读书笔记(8)hadoop NIO
-
php实现与erlang的二进制通讯实例解析
-
js解析与序列化json数据(一)json.stringify()的基本用法_json
-
PHP随机数生成与使用解析_PHP教程
-
Java基本类型与包装类详细解析
-
引用 js在IE与FF之间的区别详细解析_javascript技巧
-
深入解析fsockopen与pfsockopen的区别_PHP教程
-
解析Java的Jackson库中对象的序列化与数据泛型绑定