React props property check

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

class PropTypesComponent extends Component {

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

        / / no limit
        test8: PropTypes.any,

        // Specify an array of some type
        test9: PropTypes.arrayOf(PropTypes.number),

        // Specify type: a react element
        test10: PropTypes.element,

        // An instance of a class
        test11: PropTypes.instanceOf(PropTypesComponent),

        // Specify any element that can be rendered, including numbers, strings, react elements, arrays, fragments.
        test111: PropTypes.node,

        // Specify that the type is an object and the object attribute value is a specific type
        test12: PropTypes.objectOf(PropTypes.number),

        // Specify enumeration types: you can restrict attributes to specific values
        test13: PropTypes.oneOf(['value1'.'value2']),

        // Specify multiple types: You can also restrict attribute types to certain specified types
        test14: PropTypes.oneOfType([
            PropTypes.bool,
            PropTypes.number,
            PropTypes.instanceOf(PropTypesComponent),
        ]),

        // Specify the type as object, and you can specify which attributes must have and which attributes can not
        test15: PropTypes.shape({
            color: PropTypes.string,
            fontSize: PropTypes.number,
        }),

        // Specify the type as object, and you can specify which attributes of the object must have, and which attributes can not. If an undefined property occurs, a warning appears.
        / / the code below optionalObjectWithStrictShape attribute values for an object, but the properties of the object has two, most optionalProperty and requiredProperty.
        // a third property appears, the console appears warning.
        optionalObjectWithStrictShape: PropTypes.exact({
            optionalProperty: PropTypes.string,
            requiredProperty: PropTypes.number.isRequired
        }),

        // If there are two attributes A and B, B is not required if A is present, otherwise B is required
        A: PropTypes.string,
        B(props) {
            if(! props.A && ! props.B) {throw new Error('there is no "A", "B" is required')}if (typeofprops.B ! = ="string") {
                throw new Error('"B" required "string"')}},You can also specify a custom validator. If validation fails, it should return an Error object instead of 'console.warn' or throw an Error. 'oneOfType' has no effect.
        customProp: function (props, propName, componentName) {
            if (!/matchme/.test(props[propName])) {
                return new Error(
                    'Invalid prop `' + propName + '` supplied to' +
                    '` + componentName + '`. Validation failed.'); }},// You can also provide a custom validator arrayOf and objectOf. If validation fails, it should return an Error object.
        // Validators are used to validate each value of an array or object. The first two arguments to the validator are the array or object itself, and the corresponding 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.'); }}),/ / the children: PropTypes. Element. IsRequired, special usage limit a single element, if the children pass multiple array is not element
    };

    // Default parameter (when props.A is not undefined, it replaces 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

Copy the code