如何使用PropTypes校验组件language属性为指定对象数组中的有效值

错误原因 #

PropTypes.oneOf() 仅支持传入字面量值数组，校验逻辑是判断传入的prop是否严格等于数组中的某一项。你传入的VALID_LANGUAGES是对象数组，而实际组件接收的language prop是en/fr这类字符串值，自然无法匹配。

正确实现 #

方案1：提取合法值适配oneOf（推荐） #

如果你的language prop传的是value字段对应的字符串，先把所有合法值提取出来再传入oneOf即可：

export const VALID_LANGUAGES = [
  { label: "English", value: "en" },
  { label: "French", value: "fr" },
  { label: "Italian", value: "it" },
  { label: "Portuguese", value: "pt" },
  { label: "Spanish", value: "sp" },
];
// 提取所有合法的语言标识
const VALID_LANGUAGE_VALUES = VALID_LANGUAGES.map(item => item.value);

MyComponent.propTypes = {
  language: PropTypes.oneOf(VALID_LANGUAGE_VALUES).isRequired
};

方案2：自定义校验器（适合复杂场景） #

如果需要更灵活的校验逻辑（比如同时校验对象结构），可以自定义校验函数：

MyComponent.propTypes = {
  language: (props, propName, componentName) => {
    const isValid = VALID_LANGUAGES.some(item => item.value === props[propName]);
    if (!isValid) {
      return new Error(
        `Invalid prop \`${propName}\` of value \`${props[propName]}\` supplied to \`${componentName}\`, expected one of: ${VALID_LANGUAGE_VALUES.join(', ')}.`
      );
    }
  }.isRequired
};

注意 #

如果你的language prop需要传入完整的语言对象，只需要把方案2的校验逻辑改成判断对象的引用或者全量字段匹配即可。

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