javascript - 单击时仅更改一个 的样式

Question

亲爱的，我正在制作一个带有侧边栏的网络应用程序。当我单击“li”元素时，我希望它变成粗体。我侧边栏中的所有信息都是从 Json 文件中检索的，该文件包含 1 个数组的 2 个对象。第一个名为“Brand”的包含 6 页(包含名称、 Logo 组件参数)，第二个名为“Components”的包含 12 页。为了显示它们，我在主组“品牌”和“组件”上制作了第一个 map ，然后在每个组的页面上制作了第二个 map 。但是当我选择一个“li”项目时，它同时将品牌和组件的第一个“li”加粗，而我只想要单击的一个

我做了一个状态 -1 作为不存在的元素，并使用 setState 处理点击。在“li”元素上，我将条件放入样式中

import React, { Component } from 'react';
import Data from './menu.json';
import { Link } from 'react-router-dom';


export default class MainMenu extends Component {
    constructor(props){
        super(props);
        this.state = {
            selected: -1
        };
    }
    handleClick = (index) => { 
        console.log("index")
        this.setState({
            selected: index
        })
    }


    render(){

        return (
            <div className="MainMenu" > 
        {
            Data.map(
                (item, index) => <div key={index}>
                    <h2 className="Title" >{item.group}</h2>
                    <ul className="List"> 
                        {item.pages.map((page, i) => 
                        <li 
                            key={i} 
                            onClick={() => this.handleClick(i)} 
                            style={ this.state.selected === i ? { fontWeight: 'bold' } : { fontWeight: 'normal' } }>                            
                            <Link to={page.url} className="ListItem">{page.name}</Link>
                        </li>)}
                    </ul>
                </div>
            )
        }

            </div>
        )
    }
}

我希望只有

当我点击它时才会变成粗体，而不是由于双 map 而变成粗体

Answer 1

您可以使用类名 https://github.com/JedWatson/classnames

用于条件className渲染，因此您可以在状态中设置点击的项目索引后执行此操作:

<li
className={
classnames({boldWeight: this.state.selectedItem === i},normalWeight:this.state.selectedItem !== i})
}></li>