prop-types 是 React 中用于运行时 props 类型校验的轻量 npm 包,仅在开发环境生效、生产环境零开销;需安装引入后通过 Button.propTypes 定义类型规则,并可配合 defaultProps 设置默认值。

JavaScript 本身是动态类型语言,运行时才确定变量类型,所以需要额外工具做类型检查。在 React 中,prop-types 是最轻量、兼容性最好的运行时 props 类型校验方案(尤其适合不使用 TypeScript 的项目)。
prop-types 是什么
prop-types 是一个独立的 npm 包,用于为 React 组件的 props 提供运行时类型检查。它不会改变代码行为,只在开发环境(process.env.NODE_ENV === 'development')下生效,生产环境自动跳过,零性能开销。
怎么安装和引入
先安装:
npm install prop-types然后在组件文件中引入:
立即学习“Java免费学习笔记(深入)”;
import PropTypes from 'prop-types';基本用法:给 props 定义类型规则
在函数组件或 class 组件定义后,直接挂载 propTypes 静态属性:
return ;
}
Button.propTypes = {
label: PropTypes.string.isRequired,
onClick: PropTypes.func,
disabled: PropTypes.bool,
};
说明:
-
PropTypes.string表示必须是字符串 -
.isRequired表示该 prop 不可省略(否则控制台报 warning) - 没加
.isRequired的 prop 允许不传,也允许传undefined或null(除非额外用PropTypes.oneOfType约束)
常用类型和进阶写法
常见类型包括:
-
PropTypes.number、PropTypes.bool、PropTypes.array、PropTypes.object、PropTypes.string、PropTypes.node(可渲染内容,如字符串/元素/数组)、PropTypes.element(单个 React 元素) - 必填 + 默认值写法:
disabled: PropTypes.bool.isRequired;默认值建议配合defaultProps使用 - 枚举值:
size: PropTypes.oneOf(['small', 'medium', 'large']) - 多种类型之一:
color: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - 自定义对象结构:
user: PropTypes.shape({ id: PropTypes.number, name: PropTypes.string.isRequired }) - 数组元素类型统一:
items: PropTypes.arrayOf(PropTypes.string)
设置默认值(仅对非 required 的 prop 有意义):
Button.defaultProps = {disabled: false,
};
基本上就这些。prop-types 不复杂但容易忽略——它不能捕获所有类型错误,也不如 TypeScript 编译期检查强大,但在快速验证、团队协作和遗留项目中依然很实用。











