响应-路由器跟踪活动链路

Question

由于react路由器没有向链接或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

由于您忘记在return函数中添加isActive()，所以请使用以下命令：

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