reactjs - Brug data- attributter med Material UI og Typescript

Jeg prøver at tilføje et data-test-id-attribut til en knap i React, men Typescript er sur over det. Hvordan kan jeg tilføje denne egenskab til ALLE Material-komponenter?

import { Button } from '@material-ui/core'

<Button dataTestId='my-test-id'>
  Click Me!
</Button>

Typescript-fejl:

TS2769: No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; fullWidth?: boolean; href?: string; size?: "medium" | ... 1 more ... | "small"; startIcon?: ReactNode; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'dataTestId' does not exist on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'component' is missing in type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' but required in type '{ component: ElementType<any>; }'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'dataTestId' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.

Så jeg vil i bund og grund fortælle TypeScript, at dataTestId skal være en gyldig egenskab på enhver React-komponent.

Svar #1

Store og små bogstaver betyder ikke noget for dataattributter og inkluderer normalt en bindestreg. Og det er præcis sådan, du tilføjer en dataattribut på knappen:

<Button data-testid='my-test-id'>
  Click Me!
</Button>

Svar #2

Har du overvejet at bruge et data-* attribut for dette?

Baseret på Typescript-dokumentationen:

Bemærk: Hvis et attributnavn ikke er en gyldig JS-identifikator (som en data-* attribut), betragtes det ikke som en fejl, hvis det ikke findes i elementattributternes type.

Relaterede artikler