JSX元素类型'Icon‘没有任何构造或调用签名
JSX元素类型'Icon‘没有任何构造或调用签名
提问于 2022-11-04 23:00:47
我对打字和诊断错误比较陌生。我正在进行侧栏导航，并试图从导航数组中提取一个图标。
阵列：
const menuItems = [
{ id: 1, label: "Dashboard", icon: <ComputerDesktopIcon />, link: "/" },
{ id: 2, label: "Page 2", icon: <AcademicCapIcon />, link: "" },
{ id: 3, label: "Settings", icon: <Cog6ToothIcon />, link: "/" },
];在我的代码中，错误源于以下部分：
<div className="flex flex-col items-start mt-24">
{menuItems.map(({ icon: Icon, ...menu }) => {
const classes = getNavItemClasses(menu);
return <div className={classes}>
<Link href={menu.link}>
<div className="flex py-2 px-3 items-center w-full h-full">
<div>
<Icon />
</div>
{!toggleCollapse && (
<span className={classNames('text-md font-medium text-dark-gray')}>
{menu.label}
</span>
)}
</div>
</Link>
</div>
})}
</div>具体来说，<Icon />调用正在抛出错误：JSX element type 'Icon' does not have any construct or call signatures。
值得注意的是，当该行被注释掉时，一切都工作得很完美。
我一直在构建props组件和其他堆栈溢出问题，但是我被捕获的地方是在menuItems.map部分.大多数教程只定义创建+实现单个const项。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-11-04 23:06:08
JSX元素类型'Icon‘没有任何构造或调用签名
icon已经是一个被调用的react组件，它返回JSX。
只需将</>替换为大括号{}。
{menuItems.map(({ icon, ...menu }) => {
...
{icon}
...
})}Stack Overflow用户
发布于 2022-11-04 23:04:33
当你做的时候
{ id: 1, label: "Dashboard", icon: <ComputerDesktopIcon />, link: "/" },在声明对象时，您正在创建React元素。icon属性现在是一个function元素(而不是函数形式的函数组件，也不是类形式的类组件)。使用<SomeComponentName />调用组件只有在SomeComponentName引用组件或类时才有意义。
要传递的对象中的属性应该只是函数或类--稍后让它用<Icon />实例化。
const menuItems = [
{ id: 1, label: "Dashboard", icon: ComputerDesktopIcon, link: "/" },
{ id: 2, label: "Page 2", icon: AcademicCapIcon, link: "" },
{ id: 3, label: "Settings", icon: Cog6ToothIcon, link: "/" },
];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74323769
复制相关文章
相似问题
腾讯云开发者
