React的props属性检查

import React, {Component} from 'react';
import {View} from "react-native";
import {UIText} from "../../../../components";
import PropTypes from "prop-types";

class PropTypesComponent extends Component {

    //约束
    static propTypes = {
        //JS类型
        test1: PropTypes.array,
        test2: PropTypes.bool,
        test3: PropTypes.func,
        test4: PropTypes.number,
        test5: PropTypes.object,
        test6: PropTypes.string,
        test7: PropTypes.symbol,

        //不限制
        test8: PropTypes.any,

        // 指定某个类型的数组
        test9: PropTypes.arrayOf(PropTypes.number),

        // 指定类型为：一个react 元素
        test10: PropTypes.element,

        //某个类的实例
        test11: PropTypes.instanceOf(PropTypesComponent),

        //指定类型为：任何可以被渲染的元素，包括数字，字符串，react 元素，数组，fragment。
        test111: PropTypes.node,

        // 指定类型为对象，且对象属性值是特定的类型
        test12: PropTypes.objectOf(PropTypes.number),

        //指定枚举类型：你可以把属性限制在某些特定值之内
        test13: PropTypes.oneOf(['value1', 'value2']),

        // 指定多个类型：你也可以把属性类型限制在某些指定的类型范围内
        test14: PropTypes.oneOfType([
            PropTypes.bool,
            PropTypes.number,
            PropTypes.instanceOf(PropTypesComponent),
        ]),

        //指定类型为对象，且可以规定哪些属性必须有，哪些属性可以没有
        test15: PropTypes.shape({
            color: PropTypes.string,
            fontSize: PropTypes.number,
        }),

        // 指定类型为对象，且可以指定对象的哪些属性必须有，哪些属性可以没有。如果出现没有定义的属性，会出现警告。
        //下面的代码optionalObjectWithStrictShape的属性值为对象，但是对象的属性最多有两个，optionalProperty 和 requiredProperty。
        //出现第三个属性，控制台出现警告。
        optionalObjectWithStrictShape: PropTypes.exact({
            optionalProperty: PropTypes.string,
            requiredProperty: PropTypes.number.isRequired
        }),

        //如果有两属性A、B，如果A在，B不是必须的，否则B是必须的
        A: PropTypes.string,
        B(props) {
            if (!props.A && !props.B) {
                throw new Error('there is no "A", "B" is required')
            }
            if (typeof props.B !== "string") {
                throw new Error('"B" required "string"')
            }
        },

        // 你也可以指定一个自定义的验证器。如果验证不通过，它应该返回Error对象，而不是`console.warn `或抛出错误。`oneOfType`中不起作用。
        customProp: function (props, propName, componentName) {
            if (!/matchme/.test(props[propName])) {
                return new Error(
                    'Invalid prop `' + propName + '` supplied to' +
                    ' `' + componentName + '`. Validation failed.'
                );
            }
        },

        //你也可以提供一个自定义的验证器 arrayOf和objectOf。如果验证失败，它应该返回一个Error对象。
        //验证器用来验证数组或对象的每个值。验证器的前两个参数是数组或对象本身，还有对应的key。
        customArrayProp: PropTypes.arrayOf(function (propValue, key, componentName, location, propFullName) {
            if (!/matchme/.test(propValue[key])) {
                return new Error(
                    'Invalid prop `' + propFullName + '` supplied to' +
                    ' `' + componentName + '`. Validation failed.'
                );
            }
        }),

        // children: PropTypes.element.isRequired, 特殊用法限制单个元素，如果children传多个就是array而不是element
    };

    //默认参数(当props.A为非undefined的时候，会取代defaultProps)
    static defaultProps = {
        test4: 20,
        A: '20',
        B: '20',
    };

    render() {
        const {test4, A} = this.props;
        return (
            <View>
                <UIText children={test4 + ''}/>
                <UIText children={A + ''}/>
            </View>
        );
    }
}

PropTypesComponent.propTypes = {
    ...PropTypesComponent.propTypes,
    C: PropTypes.number
}
export default PropTypesComponent