英文:
React JS. NavLink activeClassName ICON, IMAGE
问题
当活动链接为/shopping-cart时，我想要将cartIcon更改为另一张图片，我应该如何做？
英文:
I have this
<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>
So when active link is /shopping-cart I want to change cartIcon to another image, how I can ?
答案1
得分: 0
如果你指的是活动链接是URL位置，也许可以尝试这个快速修复：
<div className="menu-item G-flex G-align-center">
<img src={window.location.href.split('/').reverse()[0] === 'shopping-cart' ? otherIcon : cartIcon} alt="购物车" />
<NavLink
onClick={this.closeBar}
to="/cart"
activeClassName="active-page"
>
购物车
</NavLink>
</div>
其中，如果用户导航到 www.url.com/shooping-cart，将显示otherIcon。但你需要注意一些边缘情况，例如 www.url.com/shooping-cart/（注意末尾多余的斜杠/），将默认使用cartIcon。
英文:
If by active link you mean url location, maybe try this quick fix:
<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>
</div>
where otherIcon is shown if user navigated to www.url.com/shooping-cart. You should be careful for some edge cases like www.url.com/shooping-cart/ (notice the extra '/' at the end), which will default to cartIcon.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论