如何将枚举类型纳入React组件的PropTypes校验？

你的问题出在：TypeScript的数字枚举编译后是一个双向映射的对象（同时包含键→值和值→键的映射），而PropTypes.oneOf()需要接收的是有效值组成的数组，直接传入枚举对象自然无法生效。

针对你的数字枚举场景，修改方式如下： #

先提取枚举的有效数值，再传入oneOf：

SizeSelector.propTypes = {
  size: PropTypes.oneOf(
    Object.values(choices).filter(v => typeof v === 'number')
  )
}

如果是字符串枚举的场景（更推荐用于明确语义）： #

如果定义的是字符串枚举：

enum choices {
  wide = 'wide',
  medium = 'medium',
  small = 'small'
}

此时Object.values(choices)直接返回字符串有效值数组，可以直接使用：

SizeSelector.propTypes = {
  size: PropTypes.oneOf(Object.values(choices))
}

补充说明： #

因为你已经用TypeScript做了编译时的类型校验，PropTypes属于运行时额外校验，如果项目对运行时校验要求不高，也可以考虑只保留TypeScript的类型定义即可。

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