proptypes

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 的例子：

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 库来使用。