CoDeR2006
@CoDeR2006
TypeScript

Какой тип у JSX элемента который прокрывается через props?

Что только не побывал, не могу понять какой тип у <BonusPage /> хотя вот код, и это явно react компонент:
BonusPage
export const BonusPage = () => {
  return <div>BonusPage</div>
}


Вот как выглядит компонент, который принимает BonusPage
LinkToPage
import { ComponentType, FC } from 'react'
import { NavLink } from 'react-router-dom'
import { cn } from '../../../utils/tailwind/cn.ts'

type TypeLinkToPage = {
  name: string
  link: string
  Icon: ComponentType<any>
  className?: string
}

export const LinkToPage: FC<TypeLinkToPage> = ({ name, link, Icon, className }) => {
  return (
    <NavLink to={link} className={cn('', className)}>
      <Icon />
      <p>{name}</p>
    </NavLink>
  )
}


А вот компонент который использует LinkToPage
Header
import { LinkToPage } from '../atoms/links/LinkToPage.tsx'
import { BonusPage } from '../../pages/bonus/BonusPage.tsx'

export const Header = () => {
  return (
    <div>
      <LinkToPage name="Бонусы" link="/bonuse" Icon={<BonusPage />} />
    </div>
  )
}


и вот что пишет ts когда я прокидаю через Icon jsx компонент BonusPage в LinkToPage
TS2322: Type  Element  is not assignable to type  ComponentType<any> 
LinkToPage.tsx(8, 3): The expected type comes from property  Icon  which is declared here on type  IntrinsicAttributes & TypeLinkToPage


Я не пойму какой тип я должен прописать тут:
type TypeLinkToPage = {
  name: string
  link: string
  Icon: ComponentType<any>
  className?: string
}

а именно тут:
Icon: ComponentType<any>

что бы все заработало. Спасибо.
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 3
MrDecoy
@MrDecoy
Верставший фронтендер
А так?
- <LinkToPage name="Бонусы" link="/bonuse" Icon={<BonusPage />} />
+ <LinkToPage name="Бонусы" link="/bonuse" Icon={ BonusPage } />
Ответ написан
Комментировать
@karminski
Senior React.JS Developer
import { ReactElement } from 'react';

export const BonusPage = (): ReactElement => {
  return <div>BonusPage</div>
}
Ответ написан
Комментировать
miraage
@miraage
Старый прогер
BonusPage имеет сигнатуру () => JSX.Element.
Проп Icon имеет сигнатуру React.ComponentType<any>.

Перепишите на
const BonusPage: React.FC = () => {
  return <div>...</div>
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы