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

本文介绍了检测链接是否在反应中处于活动状态的道具的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个带有子组件的 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>