Javascript 反应JS。导航链接activeClassName图标,图像
我有这个Javascript 反应JS。导航链接activeClassName图标,图像,javascript,reactjs,jsx,Javascript,Reactjs,Jsx,我有这个 <div className="menu-item G-flex G-align-center"> <img src={cartIcon} alt="Shopping cart" /> <NavLink onClick={this.closeBar} to="/cart" activeClassName="active-page" >
<div className="menu-item G-flex G-align-center">
<img src={cartIcon} alt="Shopping cart" />
<NavLink
onClick={this.closeBar}
to="/cart"
activeClassName="active-page"
>
Shopping Cart
</NavLink>
</div>
购物车
因此,当活动链接为/shopping cart时,我想将cartIcon更改为另一个图像,我如何可以?如果活动链接指的是url位置,请尝试以下快速修复方法:
<div className="menu-item G-flex G-align-center">
<img src={window.location.href.split('/').reverse()[0] === 'shopping-cart' ? otherIcon : cartIcon} alt="Shopping cart" />
<NavLink
onClick={this.closeBar}
to="/cart"
activeClassName="active-page"
>
Shopping Cart
</NavLink>
购物车
其中,如果用户导航到www.url.com/shooping cart
,则显示其他图标。您应该注意一些边缘情况,如www.url.com/shooping cart/
(注意末尾额外的“/”),它将默认为cartIcon