在子道具上分配 onClick 时出错

Question

i there.

considering these two components:

const Link: React.FC<{
    clicked?: () => {};
    Icon: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
    children: string;
}> = ({ Icon, children, clicked }) => {
    return (
        <div className='sidebarLink' onClick={clicked}>
            <Icon />
            <p>{children}</p>
        </div>
    );
};

const Navbar: React.FC<INavbar> = ({ setPage }) => {
    return (
        <nav className='sidebarOptions'>
            <section>
                <Link Icon={GamesIcon}>Better Games</Link>
                <Link Icon={HomeIcon}>Home</Link>
                <Link Icon={StoreIcon}>Store</Link>
                <Link Icon={DashboardIcon} onClick={() => setPage('library')}>
                    Library
                </Link>
                <Link Icon={PeopleAltIcon}>Friends</Link>
                <Link Icon={EmojiEmotionsIcon}>Unreal Engine</Link>
            </section>

            <section className='section2'>
                <p>Downloads</p>
                <p>Settings</p>
                <p>user</p>
            </section>
        </nav>
    );
};

I am getting this error:

Type '{ children: string; Icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & { clicked?: (() => {}) | undefined; Icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>; children: string; } & { ...; }'. Property 'onClick' does not exist on type 'IntrinsicAttributes & { clicked?: (() => {}) | undefined; Icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>; children: string; } & { ...; }'.ts(2322)

what would be the right type for 'clicked' ?

regards.

Answer 1

Link component expects a prop called clicked , not onClick - rename it.

<Link Icon={DashboardIcon} clicked={() => setPage('library')}>
    Library
</Link>

Secondly, I believe it's a void function, which does not return anything ( setPage looks like a hook).

clicked?: () => void;

Anyways if setPage does return something, change the void to the stuff that it returns.