React的PropTypes和DefaultProps

最新推荐文章于 2022-12-07 14:51:34 发布

Meskjei

最新推荐文章于 2022-12-07 14:51:34 发布

阅读量644

点赞数

分类专栏： React 文章标签： React PropTypes DefaultProps

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/97122111

版权

React 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了React中propTypes的使用，包括基本JS类型、可渲染元素、React元素、实例、枚举类型、多种类型组合、数组和对象类型的验证。同时，详细阐述了defaultProps的作用，它是组件的默认属性值，当组件实例未接收到相应属性时，将使用defaultProps提供的默认值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
        )
    }
}