React PropTypes - objectOf vs shape

每天有数百万的React开发人员使用prop-types包来对传递给他们组件的props进行类型检查。我们中的大多数人可能对其中各种内置验证器都很熟悉，但是在处理对象props时，许多开发人员似乎遇到了困难。幸运的是，PropTypes.objectOf()和PropTypes.shape()验证器可以帮助解决这个问题。

PropTypes.shape()

当描述一个已知其键名且可能表示不同类型的对象时，可以使用PropTypes.shape()验证器。例如：

import PropTypes from 'prop-types';
// 预期的prop对象 - 键名已知
const myProp = {
  name: 'John',
  surname: 'Smith',
  age: 27
};
// 对prop对象进行PropTypes验证
MyComponent.propTypes = {
  myProp: PropTypes.shape({
    name: PropTypes.string,
    surname: PropTypes.string,
    age: PropTypes.number
  })
};

PropTypes.objectOf()

当描述一个键名可能不事先知道且通常表示相同类型的对象时，可以使用PropTypes.objectOf()验证器。例如：

import PropTypes from 'prop-types';
// 预期的prop对象 - 动态键名（例如用户ID）
const myProp = {
  25891102: 'johnsmith',
  34712915: 'ducklord',
  76912999: 'mrquacks'
};
// 对prop对象进行PropTypes验证
MyComponent.propTypes = {
  myProp: PropTypes.objectOf(PropTypes.number)
};