1、引入库
import xx from 'prop-types';
2、配置参数信息(不符合只会报警告,不会中断程序)
类组件:
(1)传参类型
组件名.propTypes={ 参数名:xx.数据类型}
(2)传参只包含一个参数,且必须传递该参数
组件名.propTypes={参数名:xx.element.isRequired}
(3)参数默认值
组件名.defaultProps={参数名:默认值}
或在组件类中给组件类添加属性
static propTypes={xxx}
static defaultProps={xxx}
函数式组件:
函数名.propTypes={xx:PropTypes.类型}
函数名.defaultTypes={xx:默认值}
参数验证:
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 所有可以被渲染的对象:数字,
// 字符串,DOM 元素或包含这些类型的数组。
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 指定的多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定形状参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 以后任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
代码示例:
import React,{Component} from 'react'
import PropTypes from 'prop-types';
export default class User extends Component{
render()
{
return (
<div>
<h3>用户:</h3>
<p>{this.props.name}</p>
</div>
)
}
}
User.propTypes={
name:PropTypes.number
}
//验证必选项
User.propTypes = {
name: PropTypes.element.isRequired
};
//默认值
User.defaultProps={
name:'jack'
}