PropTypes

PropTypes: 实例的校验

class Model {}

function TypeComp(props) {
    return <div>{props.modelProp.name}</div>
}

TypeCompo.defaultProps = {
    modelProp:new Model()    
}

TypeComp.propsType = {
    modelProp: PropTypes.instanceOf(Model)
}

上面的modelProp必须是Model的实例。

PropTypes: 具体值的校验

function TypeComp(props) {
    return <div></div>
}
TypeCompo.defaultProps = {

}

TypeComp.propsType = {
    typeProps: PropTypes.oneOf(['News', 'Photos'])
}

这里typeProps值必须是News或Photos中的一个。

PropsTypes: 多个类型的校验

function TypeComp(props) {
    return <div></div>
}
TypeCompo.defaultProps = {
    optProp: " " || 0 || new Model()    
}

TypeComp.propsType = {
    optProp: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.instanceOf(Model)
    ])
}

optProp的类型可以是string,number或Model实例。

PropTypes: Shape and Types validation

某种类型的数组

function TypeComp(props) {
    return <div></div>
}
TypeCompo.defaultProps = {

}

TypeComp.propsType = {
    arrayOfProp: PropTypes.arrayOf(PropTypes.number),
}

arrayOfProp必须是一个数组类型，并且里面的值是数字类型。如果传递下面这样的，会抛出错误：

<TypeComp arrayOfProp={[34,6,"34"]} />

某种类型的对象

function TypeComp(props) {
    return <div></div>
}
TypeCompo.defaultProps = {

}

TypeComp.propsType = {
    objOfProp: PropTypes.objectOf(PropTypes.number),
}

这里的objOfProp必须是一个对象，并且对象的属性值必须是一个数字类型。

呈现特定的塑造

function TypeComp(props) {
    return <div>Name: {props.shapeOfProp.name}, Age:{props.shapeOfProp.age}</div>
}
TypeCompo.defaultProps = {

}

TypeComp.propsType = {
    shapeOfProp: PropTypes.shape({
        name: PropTypes.string,
        age: PropTypes.number
    }),
}

所以我们必须传递这样的东西：

<TypeComp shapeOfProp={{name:"nnamdi",age:20}}

如果像下面这样传递，将抛出错误：

<TypeComp shapeOfProp={{name:"nnamdi",age:"20"}}

或者：

<TypeComp shapeOfProp={{name:"nnamdi", rank:2}}

PropTypes: 传递任何东西

PropTypes.any.isRequired

PropTypes: 必须要的验证

PropTypes.string.isRequired // 必须提供string类型的prop

PropTypes.func.isRequired // 必须提供function类型的prop

PropTypes: 自定义验证

function TypeComp(props) {
    return <div></div>
}

TypeCompo.defaultProps = {

}

TypeComp.propsType = {
    customProp: function(props,propName,component) {
        if(!regex.test(props[propName])){
            return new Error(`Invalid prop passed to ${component}`)
        }
    }
}

参考： 官方文档

原文：Understanding React PropTypes - Type-Checking in React