一、为什么使用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,
五、class定义中使用方法
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// Specifies the default values for props:
Greeting.defaultProps = {
name: 'Stranger'
};
// Renders "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
六、ES7中使用方法示例
class Greeting extends React.Component {
//如果没有传递该属性时的默认值
static defaultProps = {
name: 'stranger'
}
//如果传递该属性，该属性值必须为字符串
static propTypes={
name:PropTypes.string
}
render() {
return (
<div>Hello, {this.props.name}</div>
)
}
}
七、使用isRequired设置属性为必须传递的值
static propTypes={
name:PropTypes.string.isRequired
}
八、arrOf和objectOf多重嵌套类型检测
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
//示例
static propTypes = {
todoList:PropTypes.arrayOf(PropTypes.shape({
id:PropTypes.string.isRequired,
text:PropTypes.string
}))
}
九、shape检测不同对象的不同属性的不同数据类型
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
optionalProperty: PropTypes.string,
requiredProperty: PropTypes.number.isRequired
}),
//示例
static propTypes = {
object:PropTypes.shape({
name:PropTypes.string,
age:PropTypes.number
})
}
