验证器
在使用PropTypes的时候,主要是使用其中定义的各种验证器,这些验证器主要是声明props
中属性的类型以及值组成规则。
其中主要的验证器有以下这些:
验证器 | 功能 |
---|---|
.array | 数组类型 |
.bool | 布尔类型 |
.func | 函数类型 |
.number | 数字类型 |
.object | 对象类型 |
.string | 字符串类型 |
.symbol | 标记类型 |
.any | 任意类型 |
.node | 任何可以被渲染的元素,例如数字、字符串、数组、Fragment等 |
.element | React元素 |
.elementType | React元素的类型 |
.instanceOf() | 某个指定类的实例 |
.oneOf([]) | 枚举多个具体值 |
.oneOfType([]) | 枚举多个PropTypes验证器 |
.arrayOf() | 指定元素类型的数组,可以接受函数作为元素的自定义验证 |
.objectOf() | 指定元素类型的对象,可以接受函数作为元组的自定义验证 |
.shape({ )} | 使用PropTypes定义的指定必需组成的对象 |
.exact({ )} | 使用PropTypes定义的精确组成的对象 |
.isRequired | 附加在其他验证器后表示必须提供的值 |
function(props, propName, componentNamr) | 自定义验证器,验证失败时需要返回Error 对象实例 |
例如可以这样来使用验证器确保传递给组件的某个属性只包含一个元素。
import PropTypes from 'prop-types';
class CompositeGreeting extends React.Component {
render() {
// 这里必须只有一个元素存在
const children = this.props.children;
return <div>{children}</div>;
}
}
CompositeGreeting.propTypes = {
children: PropTypes.element.isRequired
};