JSX 元素类型“图标”没有任何构造或调用签名

Question

我对打字稿比较陌生，并试图诊断错误。我正在制作侧边栏导航并尝试从导航数组中提取图标。

大批：

    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组件和其他 Stack Overflow 问题，但我遇到的问题是在menuItems.map...大多数教程仅定义创建+实现单个const项目。

Answer 1

当你这样做时

{ id: 1, label: "Dashboard", icon: <ComputerDesktopIcon />, link: "/" },

当您声明对象时，您正在创建 React 元素。该icon属性现在是一个 React 元素（而不是函数形式的功能组件，或者类形式的类组件）。仅当引用组件或类时，调用组件才有<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: "/" },
];