javascript - TypeScriptでReactにアイコンをpropsとして渡す方法

私は TypeScript に不慣れで、簡単なプロジェクトを始めました。サイドバーコンポーネントがあり、それは複数の sidebarNavigationItem コンポーネントで構成されています。各サイドバー項目には、以下のようにアイコンとタイトルがあります。

サイドバー.tsx

import SidevarNavigationItem from "./SidevarNavigationItem"
import { HomeIcon } from "@heroicons/react/24/solid"
import { StarIcon } from "@heroicons/react/24/solid"


const Sidebar = () => {
  return (
    <nav
      id="sidebar"
      className="p-2 mt-5 max-w-2xl xl:min-w-fit sticky top-20 flex-grow-0.2 text-center h-screen"
    >
      <div id="navigation">
        <SidevarNavigationItem Icon={<HomeIcon />} name="Homepage" source="/" />
        <SidevarNavigationItem
          Icon={<StarIcon />}
          name="Tournaments"
          source="/tournaments"
        />
       
      </div>
    </nav>
  )
}

export default Sidebar

SidebarNavigationItem.tsx

import Link from "next/link"
import { FunctionComponent } from "react"

interface Props {
  Icon: React.ElementType
  name: string
  source: string
}

const SidevarNavigationItem: FunctionComponent<Props> = ({
  Icon,
  name,
  source,
}) => {
  return (
    <Link href={source}>
      <div className="flex items-center cursor-pointer text-3xl space-x-5 justify-center">
        {Icon && <Icon classname="h-8 w-8 text-red-500" />}
        <p className="hidden sm:inline-flex font-medium">{name}</p>
      </div>
    </Link>
  )
}

export default SidevarNavigationItem

問題は、型が JSX.Element のときに、props として渡されたアイコンにスタイルを適用できないことです。Icon の型を React.ElementType に変更するとスタイルを追加できますが、親側で次のようなエラーが発生します

型 'Element' は型 'ElementType' に代入できません

どうすればいいですか？

回答 #1

レンダリングされたJSXではなく、コンポーネント自体の参照を渡す必要があります。

それで、あなたの Sidebar.tsx コンポーネントでは、これらの行を置き換える必要があります:

Icon={<HomeIcon />}
Icon={<StarIcon />}

それぞれこれらの行で：

Icon={HomeIcon}
Icon={StarIcon}

最終的なコードはこのようにするべきです:

<div id="navigation">
    <SidevarNavigationItem Icon={HomeIcon} name="Homepage" source="/" />
    <SidevarNavigationItem
      Icon={StarIcon}
      name="Tournaments"
      source="/tournaments"
    />
</div>