react选中当前的问题

Question

如下图所示，我用了 activeClassName 的形式来实现，但是第一个菜单的选中class并不会消失，求解？

<NavLink activeClassName="cur" to={item.path}>{item.name}</NavLink>

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
class Head extends Component{
    render(){
        let navs = [
            {
                path:"/",
                name:'首页'
            },
            {
                path:"/profile",
                name:'企业简介'
            },
            {
                path:"/product",
                name:'成功案例'
            },
            {
                path:"/content",
                name:'联系我们'
            }
        ]
        return (
            <header>
                <nav>
                    {
                       navs.map((item,i) => {
                        return <li key={i} ><NavLink activeClassName="cur" to={item.path}>{item.name}</NavLink></li>
                       }) 
                    }
                </nav>
            </header>
        )
    }
}
export default Head;

Answer 1

不知道你的代码是如何，这种最基本的实现：

class extends React.Component {

    constructor(props) {
        this.stete = {active: 1}
    }
    
    render() {
        return (
            <div>
                <Menu className={this.state.active === 1 && 'cur' || undefined} onClick={() => this.setState({active : 1})}>menu 1</Menu>
                <Menu className={this.state.active === 2 && 'cur' || undefined} onClick={() => this.setState({active : 2})}>menu 2</Menu>
                <Menu className={this.state.active === 3 && 'cur' || undefined} onClick={() => this.setState({active : 3})}>menu 3</Menu>
            </div>
        );
    }
}