JSX.元素作为接口TS中的道具

Question

我有一个组件的接口，它应该以JSX.Element为道具，我怎么能正常地做到这一点？现在我使用ReactNode，但当我尝试显示图标时，它不起作用

export interface firstLevelMenuItem {
route: string;
name: string;
icon: ReactNode;
}

import { Courses, Books, Products, Services } from "@/components/UI";
const firstLevelMenu: firstLevelMenuItem[] = [
{
route: "courses",
name: "Курсы",
icon: Courses,
},
];
const buildFirstLevel = (): JSX.Element => {
return (
<>
{firstLevelMenu &&
firstLevelMenu.map((el) => (
<div key={el.route}>
<a href={`/${el.route}`}>
<div
className={cn(styles.firstLevel, {
[styles.firstLevelActive]: el.id == firstCategory,
})}
>
{el.icon} // doesn't show
<span>{el.name}</span>
</div>
</a>
</div>
))}
</>
);
};

图标组件示例：

const Courses = (): JSX.Element => {
return (
// some svg
);
};
export default Courses;

Answer 1

您正在尝试呈现函数(？(Courses，或者它是什么。如果您想将其呈现为JSX元素，则必须将其编写为JSX元件：

const firstLevelMenu: firstLevelMenuItem[] = [
{
route: "courses",
name: "Курсы",
icon: <Courses />,
},
];

或者，在渲染代码中将其渲染为JSX元素：

firstLevelMenu.map((el) => (
const Icon = el.icon;
<div key={el.route}>
<a href={`/${el.route}`}>
<div
className={cn(styles.firstLevel, {
[styles.firstLevelActive]: el.id == firstCategory,
})}
>
<Icon />
<span>{el.name}</span>
</div>
</a>
</div>
))}