Проблема с typescript в React (child)?

Question

[vovashaplin]

На скриншоте видно, что ему не нравится child. Не знаю что с этим делать

interface INavItem {
    key: string;
    name: string;
    as?: string;
}

const navitems: Array<INavItem> = [
    { key: 'global-search', name: 'Новые друзья...' },
    { key: '/userpage/[userID]', name: 'Моя страница', as: `/userpage/${Cookie.get('userId')}` },
    { key: 'news', name: 'Новости' },
    { key: 'dialogs', name: 'Сообщения' },
    { key: 'friends', name: 'Друзья' },
    { key: 'teams', name: 'Сообщества' },
    { key: 'settings', name: 'Настройки' }
];

const renderIcons = (key: string) => {
    if (key === 'gloabal-search') return <SearchOutlined />;
    if (key === '/userpage/[userID]') return <HomeOutlined />;
    if (key === 'news') return <MailOutlined />;
    if (key === 'dialogs') return <CommentOutlined />;
    if (key === 'friends') return <UserOutlined />;
    if (key === 'teams') return <TeamOutlined />;
    if (key === 'settings') return <SettingOutlined />;
};

interface IActiveLink {
    children: React.ReactNode;
    href: string;
    as?: string;
}

const ActiveLink: React.FC<IActiveLink> = ({ children, ...props }) => {
    const router = useRouter();
    const child = React.Children.only(children);
    return (
        <Link {...props}>
            {React.cloneElement(child, {
                active: router.pathname === props.href,
            })}
        </Link>
    );
};

const renderNavItems = (navitems: Array<INavItem>) => {
    return (
        <>
            {navitems.map(navitem => (
                <ActiveLink key={navitem.key} href={`/${navitem.key}`}>
                    <NavLink>
                        <div>{renderIcons(navitem.key)}</div>
                        <div>{navitem.name}</div>
                    </NavLink>
                </ActiveLink>
            ))}
        </>
    );
};

Comments

[alex4answ]

почему вы используете if if if if i fi fi fi fi f if ?
есть switch

[vovashaplin]

alex4answ, Спасибо, поменяю. Но это не меняет суть вопроса.

[Robur]

На скриншоте видно, что ему не нравится child.

но совершенно не видно чем именно. текст ошибки приложите.

[Robur]

vovashaplin, конкретно в этом варианте пачка однострочных if вполне нормально. то что switch есть не значит что его надо слепо использовать всегда где у вас больше одного if.

[Loli E1ON]

А какая ошибка выводится?

[Demian Smith]

Вот как решается проблема с cloneElement https://stackoverflow.com/questions/42261783/how-t...

[Demian Smith]

А NavLink подсвечивается потому что ему нужен атрибут `to`.

[Demian Smith]

Кстати, NavLink хорош тем что active ему выставляется автоматически. В компоненте ActiveLink мало смысла, потому что он по сути проделывает ту работу, которую умеет делать NavLink.

[vovashaplin]

Demian Smith, Спасибо большое!

[vovashaplin]

Demian Smith, да, так и есть. Но я пишу на next.js. У него нет подобного функционала(

Answer 1

[vovashaplin]

Закрыто