Использование ссылки в качестве компонента компонента сетки пользовательского интерфейса материала - PullRequest
Новая
       7

Использование ссылки в качестве компонента компонента сетки пользовательского интерфейса материала

0 голосов
/ 22 января 2020

Согласно документации по пользовательскому интерфейсу материала , вы можете указать строку или компонент для свойства component элемента Grid.

Я хочу изменить существующий экземпляр Grid действует как якорь, но я хочу выполнить sh, используя компонент Link вместо предоставления 'a' в качестве свойства component (это потому, что 'a' используется в качестве свойства компонента вызывает полную ссылку sh, где я предполагаю, что использование компонента Link не дает.)

Проблема заключается в том, что фактически нигде не задокументировано, как выполнить sh, используя компонент с этим свойством вместо строка. Я могу заставить его отображаться как якорь, используя перегрузку строки, но не с компонентом.

Я пробовал несколько методов предоставления компонента этому свойству, но самый простой случай - что-то вроде этого: 

<Grid component={ Link }>

Но оно всегда подсвечивается как ошибка, а в качестве сообщения об ошибке указывается «Ни один метод перегрузки не соответствует этому вызову».

Перегрузка для свойства component выглядит следующим образом: 

component?: string | React.ComponentType<Omit<GridProps, StrippedProps>>;

Итак, мой вопрос: как на самом деле это должно быть достигнуто? Кажется, что это не так просто, как указать тип компонента, как предлагается в документации, или , как вы можете сделать с Button component .

Edit: вот пример код, который дает мне эту ошибку. 

const Test: React.FunctionComponent = () => {
  return(
    <Grid component={ Link }/>
  )
}

Я забыл упомянуть, что я использую TypeScript в зрелой базе кода реакции / редукции. Я думаю, что это ошибка TypeScript-Speci c, так как я не вижу ее в codeandbox.io. Это не проблема управления версиями, поскольку я проводил все тесты в одной и той же версии Material UI Core (4.1.1).

Сообщение об ошибке выглядит следующим образом: 

  Overload 1 of 2, '(props: GridProps, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
    Type 'typeof Link' is not assignable to type 'string | ComponentClass<Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">, any> | FunctionComponent<...> | undefined'.
      Type 'typeof Link' is not assignable to type 'ComponentClass<Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">, any>'.
        Types of parameters 'props' and 'props' are incompatible.
          Property 'to' is missing in type 'Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">' but required in type 'Readonly<LinkProps>'.
  Overload 2 of 2, '(props: PropsWithChildren<GridProps>, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
    Type 'typeof Link' is not assignable to type 'string | ComponentClass<Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">, any> | FunctionComponent<...> | undefined'.
      Type 'typeof Link' is not assignable to type 'ComponentClass<Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">, any>'.
...