使用 TypeScript Enum 和 PropTypes 来定义 React 组件道具

Question

我有组件，我使用 TypeScript 接口来定义它的道具：

interface Props {
    headerType: DROPDOWN_MENU_TYPE, //DROPDOWN_MENU_TYPE is enum
    headerContent: SVGClass
    isReverse: boolean;
};

const MyComp: React.FunctionComponent<Props> = () => {};

然后我使用 PropTypes 在运行时验证它的 props：

DropDownMenu.propTypes = {
    headerType: PropTypes.oneOf(DROPDOWN_MENU_TYPE), //error here
    headerContent: PropTypes.instanceOf(SVGClass),
    isReverse: PropTypes.bool
};

我收到了这个错误：

“typeof DROPDOWN_MENU_TYPE”类型的参数不能分配给“readonly DROPDOWN_MENU_TYPE[]”类型的参数。

类型 'typeof DROPDOWN_MENU_TYPE' 缺少类型 'readonly DROPDOWN_MENU_TYPE[]' 中的以下属性：长度、连接、连接、切片和其他 16 个。

如何将 TypeScriptenum与PropTypes? 我该如何解决这个错误？

Answer 1

你可以试试

const DropdownMenuType = PropTypes.oneOf(
  Object.values(DROPDOWN_MENU_TYPE) as DROPDOWN_MENU_TYPE[]
);

DropDownMenu.propTypes = {
  headerType: DropdownMenuType,
  ...
};

每当我需要针对枚举进行验证时，它都适合我。