检测链接是否在反应中处于活动状态的道具 [英] Prop to detect if link is active in react

问题描述

我有一个带有子组件的 NavLink

I have a NavLink which have child components

<NavLink
    className={StyledAppNavItem}
    activeClassName={StyledAppNavItemActive}
    to={link.path}
>
    <Icon size={28} icon={link.icon} color={isActive?'red':'blue'}/>
    <StyledAppNavName>{link.name}</StyledAppNavName>
</NavLink>

就像在链接处于活动状态时附加 activeClassName 一样，我需要检测此链接是否处于活动状态并向其子组件发送道具 Icon

Like activeClassName is attached when the link is active, I need to detect if this link is active and send a prop to its child component Icon

有点像

推荐答案

很遗憾，无法从 NavLink 获取 isActive.您需要创建您的自定义 NavLink.像这样:

Unfortunately, there is no way to get isActive from NavLink. You need to create your custom NavLink. Something like this:

function MyNavLink() {
    return (
        <Route path={link.path} children={({ match }) => (
            <Link
                className={`${StyledAppNavItem} ${match ? StyledAppNavItemActive : ''}`}
                to={link.path}
            >
                <Icon size={28} icon={link.icon} color={match ? 'red' : 'blue'}/>
                <StyledAppNavName>{link.name}</StyledAppNavName>
            </Link>
        )} />
    );
}

或者您可以将 Route 添加到您当前的组件中:

Or you can just add Route to your current component:

<NavLink
    className={StyledAppNavItem}
    activeClassName={StyledAppNavItemActive}
    to={link.path}
>
    <Route path={link.path} children={({ match }) => (
        <Icon size={28} icon={link.icon} color={match?'red':'blue'}/>
    )} />
    <StyledAppNavName>{link.name}</StyledAppNavName>
</NavLink>

这篇关于检测链接是否在反应中处于活动状态的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！