我想做一个网易云的左边导航栏效果

#1

问题描述

我想点击的时候当前菜单的选项高亮（active），应该怎么做

代码

App

const data = [{
    id: 0,
    name: 1
}, {
    id: 1,
    name: 2
}, {
    id: 2,
    name: 3
}]
class App extends Component {
    render() {
        return (
            <div className="App">
                <Menu test={data} active={0}></Menu>
                <Menu test={data} active={1}></Menu>
            </div>
        );
    }
}

Menu

class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            listItems: props.test.map((test, key) => {
               return <MenuItem key={test.id} title={test.name} active={props.active === key ? true : false}></MenuItem>
            
            })
        }
    }


    render() {
        return (
            <div>
                {this.state.listItems}
            </div>
        );
    }
}

MenuItem

class MenuItem extends Component {
	 constructor(props) {
        super(props);
        this.state = {
            className: props.active ? 'active item' : 'item'
        }
    }

    render() {
        return (
            <div className={this.state.className}}>
                {this.props.title}
            </div>
        );
    }

    
}