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

Question

[Maksym Sahaidak]

Что только не побывал, не могу понять какой тип у <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>

что бы все заработало. Спасибо.

Comments

[Александр]

Можете использовать тип React.FC или React.PropsWithChildren (в итоге получать контент будете через props.children) или React.ReactNode. Я бы выбрал второй вариант, как более стабильный в плане актуальности.

[Вадим]

Возможно так:

- <LinkToPage name="Бонусы" link="/bonuse" Icon={<BonusPage />} />
+ <LinkToPage name="Бонусы" link="/bonuse" Icon={ BonusPage } />

[WbICHA]

Александр, а ты на код вообще смотрел?
Проблема не в типе, что автор пытается передать.

[Александр]

WbICHA, мельком совсем, не заметил даже в 2 часа ночи :/

Answer 1

[Антон Иванов]

import { ReactElement } from 'react';

export const BonusPage = (): ReactElement => {
  return <div>BonusPage</div>
}

Answer 2

[Mikhail Osher]

BonusPage имеет сигнатуру () => JSX.Element.
Проп Icon имеет сигнатуру React.ComponentType<any>.

Перепишите на

const BonusPage: React.FC = () => {
  return <div>...</div>
}