React：PropTypes 作用示例

PropTypes 是 React 中一个非常重要的功能，它的主要作用是进行组件属性的类型检查，以确保组件接收到的 props 是符合预期类型的。

以下是 PropTypes 的主要作用和使用方法：

PropTypes 的主要作用

1. 类型检查：在开发环境中验证传递给组件的 props 是否为期望的数据类型。

2. 文档作用：为组件提供自文档的能力，其他开发者可以通过查看 PropTypes 了解组件需要什么样的 props。

3. 调试辅助：当传入的 props 类型不匹配时，在控制台显示警告信息，帮助你更快地找到问题。

4. 接口定义：明确定义组件的对外接口，增强组件的可维护性。

基本使用示例

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

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

注意事项

• 在 React 15.5 之前，PropTypes 是 React 的一部分 (React.PropTypes)
• 在 React 15.5 及以后，PropTypes 被移到了独立的包 prop-types 中

常用的 PropTypes 检查器

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // 基本类型
  optionalString: PropTypes.string,
  optionalNumber: PropTypes.number,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalObject: PropTypes.object,
  optionalArray: PropTypes.array,
  optionalSymbol: PropTypes.symbol,
  
  // 任何可被渲染的元素（数字、字符串、React 元素）
  optionalNode: PropTypes.node,
  
  // React 元素
  optionalElement: PropTypes.element,
  
  // 类实例
  optionalInstance: PropTypes.instanceOf(MyClass),
  
  // 特定值之一
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  
  // 多种类型之一
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  
  // 特定类型的数组
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  
  // 特定类型的对象
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  
  // 特定形状的对象
  optionalObjectWithShape: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number
  }),
  
  // 必需的属性
  requiredFunc: PropTypes.func.isRequired,
  requiredAny: PropTypes.any.isRequired,
  
  // 自定义验证器
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  }
};

默认 Props

你还可以通过 defaultProps 为组件定义默认的 props 值：

Greeting.defaultProps = {
  name: 'Stranger'
};