react中prop-types的使用

本文介绍了React中Prop-Types的作用及用法,包括如何定义props的类型检查、设置默认值等,并提供了实例帮助理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是prop-types?prop代表父组件传递过来的值,types代表类型。简单来说就是用来校验父组件传递过来值的类型

import PropTypes from 'prop-types';
TodoItem.propTypes = {
    test: PropTypes.string.isRequired,   //加上isRequired以后,即使父组件没传递值也会抛出警告
}
import PropTypes from 'prop-types';
TodoItem.propTypes = {
    test: PropTypes.arrayOf(PropTypes.string, PropTypes.number)   //可以设置多个类型
   test: PropTypes.oneOfType([PropTypes.string, PropTypes.number])   //符合任意一个类型即可
}

 

那么如何解决父组件没传递值也会抛出的警告呢?可以使用react里的defaultProps来设置默认的props值

TodoItem.defaultProps = {
  test: 'hello word'  
}

还有想学习更多proptypes的同学请关注react文档https://reactjs.org/docs/typechecking-with-proptypes.html

大家学会了吗?

转载于:https://www.cnblogs.com/lanshu123/p/10624750.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值