反應路由器跟蹤活動鏈接

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' : ''; 
}