反应路由器跟踪活动链接

Question

由于react-router并未向链接或li添加活动类，因此我希望将活动链接保留在我的菜单状态中。当我登录this.state.activeLink时，我得到了正确的值，但由于某种原因，类'activeLink'没有被添加到li中。为什么是这样？ isActive（）在我登录时正确返回true或false，但仍然不会将该类添加到li中。这里发生了什么？

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom'; 

import logo from '../images/logo.png'; 

export default class Navbar extends Component { 
    constructor(props){ 
     super(props); 

     this.state = { activeLink : '' }; 
     this.setActive = this.setActive.bind(this); 
    } 

    setActive(event){ 
     this.setState({ activeLink: event.target.id }); 
    } 

    isActive(link){ 
     console.log('isActive:', link == this.state.activeLink); 
     link == this.state.activeLink ? 'activeLink' : ''; 
    } 

    render(){ 
     return (
      <div className="header"> 
       <div className="row"> 
        <div className="header-left"> 
         <div className="logo"> 
          <img src={logo} alt=""/> 

         </div> 
         <div className="header-title">Physical Twist</div> 

         <div className="menu"> 
          <ul className="nav"> 
           <li className={this.isActive('home')}><Link to="/" id="home" onClick={this.setActive}>Home</Link></li> 
           <li className={this.isActive('store')}><Link to="/store" id="store" onClick={this.setActive}>Store</Link></li> 
           <li className={this.isActive('catalogue')}> <Link to="#" id="catalogue" onClick={this.setActive}>Catalogue</Link></li> 
           <li className={this.isActive('contact')} ><Link to="#" id="contact" onClick={this.setActive}>Contact</Link></li> 
          </ul> 
         </div>        
        </div> 
       </div> 
      </div> 
     ); 
    }; 
} 

Answer 1

因为你忘了在isActive()函数添加return，使用此：

isActive(link){ 
    console.log('isActive:', link == this.state.activeLink); 
    return link == this.state.activeLink ? 'activeLink' : ''; 
} 

Answer 2

isActive没有返回任何东西。

isActive(link){ 
    link == this.state.activeLink ? 'activeLink' : ''; 
} 

应该

isActive(link){ 
    return link == this.state.activeLink ? 'activeLink' : ''; 
}