reactjs - Kan inte använda href med IconButtonProps

Jag försöker skapa en wrapper för IconButton. Jag vill kunna skicka till exempel komponent- eller href-prop, men jag kan inte göra detta när jag skickar IconButtonProps till den. Hur skulle jag kunna uppnå detta?

function NavIconLink(props : IconButtonProps) {
    const classes = useStyles();
    const { ...rest } = props;
    
    return (    
        <IconButton
            {...rest}
            href=""
            className={classes.buttonLink}
        >
            {props.children}
        </IconButton>
    )
}

Svar #1

Lösning

Ställ in generiken för komponenttypen på IconButtonProps-typen till 'a'.

function NavIconLink(props: IconButtonProps<'a'>) {

Förklaring

Jag kan återskapa ditt fel. Om jag bara sätter ett href finns det inget problem. Men om jag sätter href och skickar ner all ...rest får jag felet No overload matches this call..

Felspåret är långt, men det är avsnittet om Överlagring 1 av 3 som vi vill lösa. Det är där du kommer att se fel som

Typerna av egenskapen 'onCopy' är inkompatibla.

Typen 'ClipboardEventHandler<HTMLButtonElement> | undefined' kan inte tilldelas typen 'ClipboardEventHandler<HTMLAnchorElement> | undefined'.

I enkla termer är felet i princip "du sätter en href-egenskap som om elementet är ett HTMLAnchorElement, men de andra egenskaperna är för ett HTMLButtonElement".

Vi behöver se till att alla props är av rätt typ för en HTMLAnchorElement.

Om du tittar på källkoden för IconButtonProps-typen kommer du att se att den har en generisk typparameter D som specificerar elementet.

export type IconButtonProps<
  D extends React.ElementType = IconButtonTypeMap['defaultComponent'],
  P = {}
> = OverrideProps<IconButtonTypeMap<P, D>, D>;

Du kommer också att se att standardvärdet för D är button -- det är därför du får HTMLButtonElement i dina felmeddelanden.

export type IconButtonTypeMap<
  P = {},
  D extends React.ElementType = 'button'
> = ExtendButtonBaseTypeMap<{
  props: P & {
    ...
  };
  defaultComponent: D;
  ...
}>;

Så när du använder den här typen behöver du specificera att dina ...rest props ska vara för en a-komponent istället för en button. Sätt den första generiska på IconButtonProps till 'a' så försvinner dina fel.

function NavIconLink({ children, ...rest } : IconButtonProps<'a'>) {
  return (
    <IconButton
      { ...rest } // props for a link
      href="" // also a prop for a link
    >
      {children}
    </IconButton>
  )
}