proptypes

PropTypes 是一个 JavaScript 库，用于帮助开发者在开发 React 组件时进行类型检查。通过使用 PropTypes，可以确保传递到组件的 props 数据具有预期的类型和结构，从而避免因类型不匹配或缺失属性而导致的错误。

PropTypes 是一种用于 React JavaScript 库的运行时类型检查实用程序，它允许你确保组件被正确使用，通过验证传入的 props 是否符合期望的类型和形状。

基本用法

在 React 中，你可以使用 proptypes 包来定义组件的 propTypes。

import PropTypes from 'proptypes';
function MyComponent({ name, age }) {
  // ...
}
MyComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
};

在这个例子中，我们定义了一个名为MyComponent 的函数式组件，并指定了它的propTypes，这意味着name 应该是一个字符串，age 应该是一个数字。

高级用法

自定义验证函数

你可以提供一个自定义的验证函数来执行更复杂的验证，这个函数应该接受一个 prop 值作为参数，如果该值不合法，则抛出一个错误。

function customValidator(props, propName, componentName) {
  if (props[propName] < 0) {
    return new Error(Invalid prop ${propName} supplied to ${componentName}. Prop value must be positive.
    );
  }
}
MyComponent.propTypes = {
  age: customValidator,
};

复合类型

有时，你可能希望验证一个对象或数组的形状，为此，你可以使用PropTypes.shape() 和PropTypes.arrayOf()。

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  tags: PropTypes.arrayOf(PropTypes.string),
};

在这个例子中，我们要求user 是一个对象，包含name 和age 属性；tags 是一个字符串数组。

默认 props

除了验证 props 的类型，你还可以使用defaultProps 为组件提供默认值，这在文档和代码可读性方面非常有用。

MyComponent.defaultProps = {
  name: 'Unknown',
  age: 0,
};

在这个例子中，如果没有提供name 或age，它们将分别默认为 ‘Unknown’ 和 0。

PropTypes 提供了一种方便的方式来验证 React 组件的 props，确保它们具有正确的类型和形状，通过使用默认 props、自定义验证函数和复合类型，你可以更灵活地控制你的组件的行为。

PropTypes 是 React 库中用于类型检查的一个工具，以下是将常见的PropTypes 以介绍形式列出：

PropTypes 类型 描述 PropTypes.array 需要一个数组类型。 PropTypes.bool 需要一个布尔类型。 PropTypes.func 需要一个函数类型。 PropTypes.number 需要一个数字类型。 PropTypes.object 需要一个对象类型。 PropTypes.string 需要一个字符串类型。 PropTypes.symbol 需要一个 Symbol 类型。 PropTypes.node 可以是数字、字符串、元素或数组（或片段）中的一个。 PropTypes.element 需要一个 React 元素。 PropTypes.instanceOf 需要一个特定类的实例。 PropTypes.oneOf 可以是从一个特定集合中选择的值。 PropTypes.oneOfType 可以是多个类型的值中的任意一个。 PropTypes.arrayOf 需要一个特定类型的数组。 PropTypes.objectOf 需要一个特定类型的对象。 PropTypes.shape 允许你定义对象的结构，以及它们包含的类型。 PropTypes.any 允许任何类型的数据。 PropTypes.custom 自定义验证器，如果验证失败，它应该返回一个 Error 对象。 PropTypes.isRequired 和其他验证器一起使用，以确保提供该属性且不是undefined。

下面是一个如何使用其中一些PropTypes 的例子：

import React from 'react';
import PropTypes from 'proptypes';
class MyComponent extends React.Component {
  // ...
}
MyComponent.propTypes = {
  // 数组
  myArray: PropTypes.array,
  // 布尔值
  myBool: PropTypes.bool,
  // 函数
  myFunc: PropTypes.func,
  // 数字
  myNumber: PropTypes.number,
  // 对象
  myObject: PropTypes.object,
  // 字符串
  myString: PropTypes.string,
  // 必填字符串
  requiredString: PropTypes.string.isRequired,
  // 特定类型的实例
  myInstance: PropTypes.instanceOf(Date),
  // 限定选项
  myEnum: PropTypes.oneOf(['news', 'photos']),
  // 多类型
  myMultiType: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Date)
  ]),
  // 数组中的元素类型
  myArrayOfType: PropTypes.arrayOf(PropTypes.number),
  // 对象中的值类型
  myObjectOfType: PropTypes.objectOf(PropTypes.number),
  // 对象形状
  myShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  })
};

请注意，自从 React 15.5 版本后，PropTypes 被移出了 React，需要单独安装proptypes 库来使用。