Question

我正在用 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>
        )
    }
}

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

如何在活动时更改 Navlink 上的图标？

1 个答案: