Question

我有该组件，并使用TypeScript接口定义其道具：

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

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

然后我使用PropTypes在运行时验证其道具：

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个。

如何将TypeScript enum与PropTypes一起使用？我该如何解决这个错误？

Answer 1

您可以尝试

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

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

每当我需要针对枚举进行验证时，为我工作。

Answer 2

如果您的枚举有数字值，并且您想传递此类值，请尝试

headerType: PropTypes.oneOf(
  Object.values(DROPDOWN_MENU_TYPE).filter(x => typeof x === 'number')
)

将TypeScript枚举与PropTypes一起使用以定义React Component props

2 个答案: