激活时如何更改 Navlink 上的图标？答案

【问题标题】：How to change Icon on Navlink when active?激活时如何更改 Navlink 上的图标？
【发布时间】：2021-05-01 12:53:19
【问题描述】：

我在 react js 中为手机制作了一个标签栏，上面有图标。我正在使用 React Router 来执行路由。现在我可以使用 .active 类在它处于活动状态时更改图标颜色。有没有办法在路线处于活动状态时更改图标文件？下面附上代码。

import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import home_icon_stroke from './home_icon_stroke.svg';
import explore_icon_stroke from './explore_icon_stroke.svg';
import activity_icon_stroke from './activity_icon_stroke.svg';
import library_icon_stroke from './library_icon_stroke.svg';
import profile_icon_stroke from './profile_icon_stroke.svg';
import './Phonetabbar.css';


export default class Phonetabbar extends Component {
    render() {
        return (
            <div className="phone-tabbar-layout" >
                <div className="fixed" >
                    <div className="phone-tabbar-list"> 
                            <div  className="tabbar-cell">
                                <NavLink exact to="/" >
                                    <img src={home_icon_stroke} ></img>
                                </NavLink>
                             </div>    
                            
                           
                            <div className="tabbar-cell">
                                <NavLink to="/explore" >
                                    <img src={activity_icon_stroke} ></img>
                                </NavLink>
                            </div>    
                    </div>
                </div> 
            </div>
        )
    }
}

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

也许您想尝试将 isActive 函数传递给 Navlink，在其中设置一个状态。

<NavLink exact to="/" 
  isActive={(match, location)=>{
     if(match){
       //set isActive state true
     }
     return match;
  } 
>
  <img src={isActive?home_icon_stroke:anotherImg} ></img>
</NavLink>

【讨论】：

像魅力一样工作，谢谢！