React中如何为初始为空、后续动态扩展的对象定义PropTypes？

嘿，这个场景我之前开发时也碰到过，分两种情况处理就好，不一定需要自定义类型检查器，看你的具体需求：

1. 简单场景：任意键 + 统一值类型 #

如果你的对象只是会添加任意字符串键，且所有值的类型都是统一的（比如都是字符串、数字或者组件等），那直接用PropTypes.objectOf()就完全够用，不需要自定义检查器。

举个例子，假设所有值都是字符串类型：

import PropTypes from 'prop-types';

// 你的组件PropTypes定义
YourComponent.propTypes = {
  foo: PropTypes.objectOf(PropTypes.string),
};

如果值可以是多种类型（比如字符串或数字），可以结合PropTypes.oneOfType()：

foo: PropTypes.objectOf(
  PropTypes.oneOfType([PropTypes.string, PropTypes.number])
),

甚至可以标记这个对象为必填：

foo: PropTypes.objectOf(PropTypes.string).isRequired,

2. 复杂场景：需要自定义规则 #

如果你的对象有特殊要求——比如键必须符合特定格式（比如只能是小写字母）、不同键对应不同的值类型、或者必须包含某些特定键同时允许其他任意键，这时候就需要自定义类型检查器了。

比如我们写一个检查器，要求所有键都是小写字母，且值必须是字符串：

import PropTypes from 'prop-types';

YourComponent.propTypes = {
  foo: function(props, propName, componentName) {
    const targetObj = props[propName];
    
    // 先检查是不是非空对象
    if (typeof targetObj !== 'object' || targetObj === null) {
      return new Error(
        `Invalid prop \`${propName}\` supplied to \`${componentName}\`: expected an object, got ${typeof targetObj}.`
      );
    }
    
    // 遍历所有键值对做自定义校验
    for (const key in targetObj) {
      // 检查键是否为小写字母
      if (!/^[a-z]+$/.test(key)) {
        return new Error(
          `Invalid key \`${key}\` in prop \`${propName}\` supplied to \`${componentName}\`: keys must be lowercase letters only.`
        );
      }
      // 检查值是否为字符串
      if (typeof targetObj[key] !== 'string') {
        return new Error(
          `Invalid value for key \`${key}\` in prop \`${propName}\` supplied to \`${componentName}\`: expected a string, got ${typeof targetObj[key]}.`
        );
      }
    }
    
    // 所有校验通过返回null
    return null;
  }
};

总结 #

• 大部分简单场景（任意键+统一值类型）：用PropTypes.objectOf()就能搞定，无需自定义。
• 有特殊规则的复杂场景：编写自定义类型检查器来满足需求。

内容的提问来源于stack exchange，提问作者Bimal Grg