react prop-types的使用方法

为什么使用prop-types?

父组件传值给子组件时的类型约束,方便后期维护;

import React from 'react'
import PropTypes from 'prop-types';
function Son(
{optionalArray,
optionalBool,
optionalFunc,
optionalNumber,
optionalObject,
optionalString,
optionalSymbol
}
){
return (
<div>
	测试
</div>

);

// 对传入的值进行约束

Son.propTypes = {
     optionalArray: PropTypes.array,//检测数组类型
     optionalBool: PropTypes.bool,//检测布尔类型
     optionalFunc: PropTypes.func,//检测函数(Function类型)
     optionalNumber: PropTypes.number,//检测数字
     optionalObject: PropTypes.object,//检测对象
     optionalString: PropTypes.string.isRequired,//检测字符串 isRequired 为该值为必传
     optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型
}
// 传入的值如果为空,那就进行默认赋值

Son.defaultProps = {
    optionalArray: [],
     optionalBool:true ,
     optionalFunc: ()=>{} ,
     optionalNumber:10  ,
     optionalObject: {id:1,num:2} ,
     optionalString:"hello world" ,
     optionalSymbol:  
}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值