React的PropTypes和DefaultProps

快来打我* 2021-11-27 06:02 310阅读 0赞

### 文章目录 ###

*  propTypes
 *   *  PropTypes的验证器
     *   *  基本的JS类型
         *  任何可以被渲染的元素
         *  react元素
         *  某个类的实例
         *  枚举类型
         *  指定多个类型
         *  指定某个类型的数组
         *  指定类型为对象且对象的属性是特定类型
         *  指定类型为对象且规定哪些属性必须有，哪些可以没有
 *  defaultProps

# propTypes #

`propTypes`是React中组件的一个特殊属性。设置它，可以为组件的`props`属性进行类型的检查。

要设置组件的`propTypes`属性需要借助`PropTypes`对象，或者说需要借助`props-type`库。

import PropTypes from 'prop-types';

注意首字母小写的`propsTypes`是组件的属性，而`PropTypes`是我们引入的库。

要使用也非常简单：

import PropTypes from 'prop-types';
    import React, {
        Component} from 'react';
    class Test extends Component{
        
        render(){
        
            return (
                <div>
                    Hello, {
        this.props.word}
                </div>
            )
        }
    }
    // 设置Test组件的propTypes属性
    Test.propTypes = {
        
        word: PropTypes.string
    };

在这个例子中，我们使用了`PropTypes.string`，意思是`word`的值应该是`string`类型的，一旦组件收到了非`string`的`word prop`则会报错。

出于性能因素，类型检查仅会在开发环境下进行。

## PropTypes的验证器 ##

除了上面使用的`PropTypes.string`验证器，还有许多其他的验证器。

### 基本的JS类型 ###

Test.propTypes = {
        
        optionalArray: PropTypes.array,
        optionalBool: PropTypes.bool,
        optionalFunc: PropTypes.func,
        optionalNumber: PropTypes.number,
        optionalObject: PropTypes.object,
        optionalString: PropTypes.string,
        optionalSymbol: PropTypes.symbol,
    }

### 任何可以被渲染的元素 ###

这里指的是数字，字符串，react 元素，数组，fragment等。

Test.propTypes = {
        
        optionalNode: PropTypes.node
    }

### react元素 ###

Test.propTypes = {
        
        optionalElement: PropTypes.element
    }

### 某个类的实例 ###

通过调用`instanceOf`操作实现

Test.propTypes = {
        
        optionalMessage: PropTypes.instanceOf(Message)
    }

### 枚举类型 ###

JS中没有枚举类型，此处的枚举是指可以把属性值限定在某些值之中。

Test.propTypes = {
        
        optionalEnum: PropTypes.oneOf(['News', 'Photos'])
    }

### 指定多个类型 ###

Test.propTypes = {
        
        optionalUnion: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.number,
            PropTypes.instanceOf(Message)
        ])
    }

### 指定某个类型的数组 ###

即可以检查数组中的元素是哪种类型

Test.propTypes = {
        
        optionalArrayOf: PropTypes.arrayOf(PropTypes.number)
    }

### 指定类型为对象且对象的属性是特定类型 ###

Test.propTypes = {
        
        optionalObjectOf: PropTypes.objectOf(PropTypes.number)
    }

### 指定类型为对象且规定哪些属性必须有，哪些可以没有 ###

Test.propTypes = {
        
        optionalObjectWithShape: PropTypes.shape({
        
            optionalProperty: PropTypes.string,
            requiredProperty: PropTypes.number.isRequired
        })
    }

# defaultProps #

组件中还有一个特殊的属性`defaultProps`。顾名思义，这是一个默认的`props`值。即当组件被引用时若没有被传入`props`，则使用`defaultProps`。

import PropTypes from 'prop-types';
    import React, {
        Component} from 'react';
    class Test extends Component{
        
        
        static defaultProps = {
        
            word: 'world'
        }
    
        render(){
        
            return (
                <div>
                    Hello, {
        this.props.word}
                </div>
            )
        }
    }