Переходя реквизит с ... rest / spread и добавление component = "a" завершается с ошибками типа - PullRequest
Новая
       10

Переходя реквизит с ... rest / spread и добавление component = "a" завершается с ошибками типа

1 голос
/ 28 февраля 2020

Я пытаюсь передать некоторые реквизиты компоненту Material-ui следующим образом: 

<Foo href="/" label="Very main page" zeroMinWidth />

и <Foo /> выглядит примерно так: 

import { GridProps } from "@material-ui/core/Grid";

interface IProps extends GridProps {
  href?: string;
  label?: string;
}

export const Foo = ({
  href, label, ...gridProps
}: IProps) => {
  return (
    <Grid item component="a" href={href} {...gridProps}>
      {label}
    </Grid>
  );
};

И я получаю ошибка: 

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: "a"; } & Partial<Record<Breakpoint, boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11>> & { alignContent?: GridContentAlignment; ... 7 more ...; zeroMinWidth?: boolean; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '{ xs?: boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11; sm?: boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11; md?: boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11; ... 271 more ...; target: string; }' is not assignable to type 'Pick<Pick<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "dir" | ... 262 more ... | "referrerPolicy"> & { ...; }, "dir" | ... 261 more ... | "referrerPolicy">'.
      Types of property 'ref' are incompatible.
        Type '((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>' is not assignable to type '((instance: HTMLAnchorElement) => void) | RefObject<HTMLAnchorElement>'.
          Type '(instance: HTMLDivElement) => void' is not assignable to type '((instance: HTMLAnchorElement) => void) | RefObject<HTMLAnchorElement>'.
            Type '(instance: HTMLDivElement) => void' is not assignable to type '(instance: HTMLAnchorElement) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Property 'align' is missing in type 'HTMLAnchorElement' but required in type 'HTMLDivElement'.
  Overload 2 of 2, '(props: DefaultComponentProps<GridTypeMap<{}, "div">>): Element', gave the following error.
    Type '{ xs?: boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11; sm?: boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11; md?: boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11; ... 271 more ...; target: string; }' is not assignable to type 'IntrinsicAttributes & Partial<Record<Breakpoint, boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11>> & { alignContent?: GridContentAlignment; ... 7 more ...; zeroMinWidth?: boolean; } & CommonProps<...> & Pick<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & Partial<Record<Breakpoint, boolean | 2 | 1 | "auto" | 12 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11>> & { alignContent?: GridContentAlignment; ... 7 more ...; zeroMinWidth?: boolean; } & CommonProps<...> & Pick<...>'.

Почему это происходит и как это исправить?

И если я удаляю {...spread} или если я удаляю component="a", он хорошо строится.

Я нашел решение по распространению спреда, вот так: 

  <Grid 
    {...{
      item: true,
      component: "a",
      href: href,
      ...gridProps
    }}
  >
    {label}
  </Grid>

Но это выглядит странно и некрасиво ...

...