react的PropTypes用法

PropTypes 是 React 中用于 类型检查（Type Checking） 的核心工具，允许开发者定义组件props 的类型、结构和必填性，从而在开发阶段捕获因类型错误导致的潜在问题。

一、PropTypes 的作用

1. 类型验证：确保传递给组件的 props 符合预期的数据类型（如字符串、数字、对象等）。
2. 结构验证：检查对象或数组中的嵌套属性是否符合要求。
3. 必填性验证：标记某些 props 为必须传递的。
4. 文档化：通过类型定义，明确组件的输入规范，提升代码可读性和维护性。

二、PropTypes 的安装

从 React v15.5 开始，PropTypes 从核心库中分离，需单独安装：

npm install prop-types

三、基本用法

1. 导入 PropTypes

import PropTypes from 'prop-types';

2. 定义组件的 PropTypes

在组件中声明 propTypes 静态属性：

function MyComponent({ title, count, isActive }) {
  return <div>{title} - {count} - {isActive ? 'Active' : 'Inactive'}</div>;
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,  // 必填字符串
  count: PropTypes.number,             // 可选数字
  isActive: PropTypes.bool,            // 可选布尔值
};

3. 设置默认值（可选）

使用 defaultProps 定义默认值：

MyComponent.defaultProps = {
  count: 0,
  isActive: false,
};

四、常用 PropTypes 验证器

类型	示例
基本类型	PropTypes.string, number, bool
必填项	PropTypes.string.isRequired
数组	PropTypes.array
对象	PropTypes.object
函数	PropTypes.func
元素（React 节点）	PropTypes.node
React 元素	PropTypes.element
实例（类的实例）	PropTypes.instanceOf(MyClass)
枚举（特定值）	PropTypes.oneOf(['A', 'B'])
多种类型	PropTypes.oneOfType([PropTypes.string, PropTypes.number])
数组中的特定类型元素	PropTypes.arrayOf(PropTypes.number)
对象中的特定字段	PropTypes.shape({ key: PropTypes.string })
严格匹配对象结构	PropTypes.exact({ key: PropTypes.string })

五、高级用法（结合用户提供的代码）

1. 验证嵌套对象结构（shape）

   例如：

   PropTypes.shape({
     header: PropTypes.object,
     body: PropTypes.object,
   });
   

   用于验证 props 是一个对象，且包含 header 和 body 字段（值类型为对象）。

2. 验证数组中的对象结构（arrayOf + exact）
   例如：

   PropTypes.arrayOf(
     PropTypes.exact({
       key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
       title: PropTypes.node,
       collapsible: PropTypes.oneOf(['header', 'disabled', 'icon']),
       // ...
     })
   );
   

   • arrayOf：验证 props 是一个数组。
   • exact：严格验证数组中的每个元素必须完全匹配定义的结构，不允许出现未声明的字段。

3. 动态类名（className 联合类型）
   允许 className 是字符串或对象（如使用 CSS Modules 或动态类名库）。