javascript - How to pass icons as props in react with typescript - Stack Overflow

admin管理员组

文章数量:1244385

I am new to typescript and started a simple project. I have a sidebar ponent that is made up of several sidebarNavigationItem ponents. Each Sidebar item has an Icon and Title, as shown below.

Sidebar.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

I am new to typescript and started a simple project. I have a sidebar ponent that is made up of several sidebarNavigationItem ponents. Each Sidebar item has an Icon and Title, as shown below.

Sidebar.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

The issue is that I can't style the icons that have been passed down as props when the type is JSX.Element. Changing the type of the Icon to React.ElementType will let me add styles but causes an error in the parent that says

Type 'Element' is not assignable to type 'ElementType'

What do I do?

• javascript
• reactjs
• typescript
• next.js

Share Improve this question Follow asked Sep 30, 2022 at 8:47 loollool 66544 gold badges1010 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You need to pass the ponent reference itself instead of its rendered jsx.

So, in your Sidebar.tsx ponent, you need to replace these lines:

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

with these lines respectively:

Icon={HomeIcon}
Icon={StarIcon}

The final code should be like this:

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

本文标签： javascriptHow to pass icons as props in react with typescriptStack Overflow