react中使用prop-types检测props数据类型

发布时间：2020-12-15 16:20:29 所属栏目：百科来源：网络整理

导读：一、为什么使用prop-types 在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-types，他可以对父组件传来的props进行检查，加入父组件中想传递的是字符串类型‘3’，而传递了一个数字类型3，如果没有类型检查

一、为什么使用prop-types

在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-types，他可以对父组件传来的props进行检查，加入父组件中想传递的是字符串类型‘3’，而传递了一个数字类型3，如果没有类型检查系统不会给与提示，但是有了类型检查以后，再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。

二、学习文档

https://www.npmjs.com/package/prop-types?npm官网
https://reactjs.org/docs/typechecking-with-proptypes.html?react官方

三、安装与引入



//安装 npm install prop-types --save //引入 import PropTypes from ‘prop-types‘;

四、它可以检测的类型

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

五、使用isRequired设置属性为必须传递的值



static propTypes={ name:PropTypes.string.isRequired }

六、使用defaultProps

TodoItem.propTypes = {
     test:Proptypes.string.isRequired,
     item      : Proptypes.string,
     deleteItem: Proptypes.func,
     index     : Proptypes.number
}
TodoItem.defaultProps = {
     test:‘hello‘
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!