Javascript 添加类时从所有其他元素中删除类

我有这个部分：

class NavTree extends React.Component {
    // This is the left nav tree that opens each group for editing
    constructor(props) {
        super(props);

        this.state = {
            activeGroup: null // use this value to highlight the nav item in the tree
        };
        this.activateGroup = this.activateGroup.bind(this);
    }

    activateGroup(event) {
        this.setState({activeGroup: event.target.id});
        this.props.onNavChange(event.target.id);
        event.target.className = "active"; // this works
    }

    render() {
        return (
            <React.Fragment>
                <div id="nav" className="col-2">
                    <ul>
                        <li id="discovery" onClick={this.activateGroup}>Discovery</li>
                        <li id="financial" onClick={this.activateGroup}>Financials</li>
                        <li id="sales_stuff" onClick={this.activateGroup}>Sales Stuff</li>
                    </ul>
                </div>
            </React.Fragment>
        );
    }
}

类NavTree扩展React.Component{
//这是左侧导航树，打开每个组进行编辑
建造师（道具）{
超级（道具）；
此.state={
activeGroup:null//使用此值高亮显示树中的导航项
};
this.activateGroup=this.activateGroup.bind（this）；
}
激活组（事件）{
this.setState（{activeGroup:event.target.id}）；
this.props.onNavChange（event.target.id）；
event.target.className=“active”；//这可以正常工作
}
render（）{
返回(

discovery
Financials
sales stuff

);
}
}

---

此代码有效：

event.target.className=“active”。。。但是，从除此之外的所有其他元素中删除类的正确方法是什么呢？
将列表元素组织到一个对象中并动态构建它们可能更容易。然后添加类作为属性。因此，在构造函数中：

this.state = {
    items: [
        {id:"discovery", text:"Discovery"},
        {id:"financial", text:"Financials"},
        {id:"sales_stuff", text:"Sales"}
    ]
    ...
}

然后在渲染中

...
<ul>
    {
        this.state.items.map(item=>(
            <li id={item.id} onClick={()=>this.activateGroup(item.id)} key={item.id}
              className={this.state.activeGroup == item.id && "active"}>
                {item.text}
            </li>
        ))
    }
</ul>
...

通过这种方式，您不需要手动添加/删除元素中的内容，添加新项目更容易（只需向状态对象添加条目）。
将列表元素组织到对象中并动态构建它们可能更容易。然后添加类作为属性。因此，在构造函数中：

this.state = {
    items: [
        {id:"discovery", text:"Discovery"},
        {id:"financial", text:"Financials"},
        {id:"sales_stuff", text:"Sales"}
    ]
    ...
}

然后在渲染中

...
<ul>
    {
        this.state.items.map(item=>(
            <li id={item.id} onClick={()=>this.activateGroup(item.id)} key={item.id}
              className={this.state.activeGroup == item.id && "active"}>
                {item.text}
            </li>
        ))
    }
</ul>
...

通过这种方式，您不必手动添加/删除元素中的内容，添加新项目更容易（只需将条目添加到状态对象即可）。
这是一种方法，但可能需要添加一项：在渲染相同类型的多个同级元素时，应为每个元素添加唯一的
键
道具。这里是
id
。正确，添加了。这是执行此操作的方法，但可能还有一个补充：当呈现相同类型的多个同级时，您应该为每个元素添加唯一的
键
道具。这里是
id
。正确，已添加。