Props 验证

React 中验证 props 的目的很明确：在开发阶段提前发现类型错误，避免运行时崩掉。它同时也充当了组件的文档——一眼就能看出组件需要什么参数。

验证方式主要有两种：TypeScript（现代首选）和 PropTypes（旧项目常见）。

一、两种验证方式

TypeScript

直接在函数签名层面约束 props，IDE 会实时提示，编译时就能拦截错误：

interface UserProps {
  name: string
  age: number
  email?: string
}

function User({ name, age }: UserProps) {
  return <div>{name} — {age}</div>
}

PropTypes

React 内置的运行时检查方案，只在开发环境生效，生产环境自动跳过：

import PropTypes from 'prop-types'

function User({ name, age }) {
  return <div>{name} — {age}</div>
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  email: PropTypes.string,
}

方案	检查时机	使用场景
TypeScript	编译时	新项目，首选
PropTypes	运行时	旧项目，无需迁移 TS

二、常用验证类型

PropTypes 内置了丰富的类型检查：

类型	写法
基础类型	`string` `number` `bool` `func` `array` `object` `symbol`
React 元素	`PropTypes.element`
任意可渲染节点	`PropTypes.node`
枚举	`PropTypes.oneOf(['small', 'large'])`
多种类型之一	`PropTypes.oneOfType([string, number])`

三、自定义验证器

内置类型不够用时，可以自己写验证逻辑：

User.propTypes = {
  age: (props, propName, componentName) => {
    if (props[propName] < 0 || props[propName] > 120) {
      return new Error(`${componentName}: age 必须在 0 到 120 之间`)
    }
  },
}

四、默认值

当父组件没传某个 prop 时，用默认值兜底：

// TypeScript 方式 —— 解构时赋予默认值
function User({ name = 'Guest', age = 18 }: UserProps) {
  return <div>{name} — {age}</div>
}

// PropTypes 方式
User.defaultProps = {
  name: 'Guest',
  age: 18,
}

五、注意事项

使用 props 验证时有几个容易踩的坑：

PropTypes 仅在开发环境运行——生产构建时会自动剥离，无需担心性能。
TypeScript 必须配合 strict 模式——否则 any 泛滥，类型检查形同虚设。
isRequired 用于必传 prop——省略时该 prop 是可选的，不传不会报警。