【一点就透】prop-types使用（附代码解释）-优快云博客

本文链接：https://blog.youkuaiyun.com/nemoiu/article/details/143164353

prop-types 是一个用于类型检查的库，特别是在 React 组件中。这是一个流行的工具，可以帮助开发者确保传递给组件的 props（属性）是特定类型的，从而提高代码的可维护性和可靠性。

安装

首先，你需要安装 prop-types：

npm install prop-types

或者使用 Yarn：

yarn add prop-types

基本使用

在一个 React 组件中，你可以使用 prop-types 来定义 props 的类型。以下是一个基本的示例：

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ name, age, isVerified }) => {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>Age: {age}</p>
            <p>Verified: {isVerified ? "Yes" : "No"}</p>
        </div>
    );
};

// 定义 props 的类型
MyComponent.propTypes = {
    name: PropTypes.string.isRequired, // 字符串类型，必填
    age: PropTypes.number,               // 数字类型，非必填
    isVerified: PropTypes.bool            // 布尔类型，非必填
};

// 设置默认 props
MyComponent.defaultProps = {
    age: 18,                             // 默认年龄
    isVerified: false                     // 默认未验证
};

export default MyComponent;

常用的 PropTypes

以下是一些常用的 prop-types 类型：

PropTypes.string：字符串类型。
PropTypes.number：数字类型。
PropTypes.bool：布尔类型。
PropTypes.array：数组类型。
PropTypes.object：对象类型。
PropTypes.func：函数类型。
PropTypes.node：可以是任何可渲染的东西（字符串、数字、组件等）。
PropTypes.element：React 元素类型。
PropTypes.oneOf：限制只允许多种特定值之一。
PropTypes.oneOfType：允许多种类型中的任意一种。
PropTypes.arrayOf：数组类型的元素，元素可以是特定的类型。
PropTypes.objectOf：对象类型的属性，属性值为特定的类型。

示例：复杂 PropTypes

可以组合使用上面提到的类型，定义复杂的 props：

import PropTypes from 'prop-types';

MyComponent.propTypes = {
    users: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.string.isRequired,
            name: PropTypes.string,
            age: PropTypes.number
        })
    ).isRequired, // 确保这是一个数组，且包含特定形状的对象
    status: PropTypes.oneOf(['active', 'inactive', 'pending']) // 只允许这三个状态
};