javascript - Bruk TypeScript Enum med PropTypes for å definere React-komponentprops

Jeg har komponenten, og jeg bruker TypeScript-grensesnitt for å definere dens props:

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

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

Deretter bruker jeg PropTypes for å validere propsene dens i kjøretid:

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

Og jeg fikk denne feilen:

Argument av typen 'typeof DROPDOWN_MENU_TYPE' kan ikke tildeles til parameter av typen 'readonly DROPDOWN_MENU_TYPE[]'.

Type 'typeof DROPDOWN_MENU_TYPE' mangler følgende egenskaper fra type 'readonly DROPDOWN_MENU_TYPE[]': length, concat, join, slice, og 16 til.

Hvordan kan jeg bruke TypeScript enum med PropTypes? Og hvordan kan jeg løse denne feilen?

Svar #1

Du kan prøve

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

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

Fungerer for meg når som helst jeg trenger å validere mot enum.

Svar #2

Hvis enumen din har numeriske verdier og du vil sende slike verdier, prøv

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

Relaterte artikler