reactjs - 检测链接是否在反应中处于活动状态的道具

Question

我有一个NavLink有子组件

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

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

有点像<Icon color={linkisActive?'red':'blue'}/>

Answer 1

不幸的是，没有办法isActive从NavLink. 您需要创建自定义NavLink. 像这样的东西：

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 添加到当前组件：

<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>