Javascript 在单击时添加类名，同时从同级中删除具有相同名称的其他类

我需要在单击时添加一个类名，同时从同级中删除具有相同类名的其他类。假设我有

function Menu(props) {
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {
        return <li className="menuitem" key={index}>{list}</li>
    })

    return (
        <ul>{menuitems}</ul>
    )
}

功能菜单（道具）{
常量列表=['list1'，'list2'，'list3']
const menuitems=list.map（（列表，索引）=>{
return
{list}
})
返回(
{menuitems}
)
}

在DOM中，它应该如下所示：

<ul>
    <list class="menuitem">list1</li>
    <list class="menuitem active">list2</li>
    <list class="menuitem">list3</li>
</ul>

清单1
清单2
清单3

我仍然处于熟悉ReactJS的状态。因此，请帮助并感谢您。

const menuitems=list.map（（list，index）=>{
const menuitems = list.map((list, index) => {
    return <li className=`menuitem ${someCheckHere && 'active'}` key={index}>{list}</li>
})

return
{list}
})

在这里，我为您创建了工作演示

您可以使用

state

变量来管理它。您必须处理

li

标记的点击事件，并在点击时设置

索引

import React, { useState } from 'react';

...
...

function App(props) {
    const [active, setActive] = useState(1)
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {
        return <li className={`menuitem${active === index ? ' active' :''}`} key={index} onClick={()=>setActive(index)}>{list}</li>
    })

    return (
        <ul>{menuitems}</ul>
    )
}

import React，{useState}来自“React”；
...
...
功能应用程序（道具）{
常量[active，setActive]=useState（1）
常量列表=['list1'，'list2'，'list3']
const menuitems=list.map（（列表，索引）=>{
return
setActive（index）}>{list}
})
返回(
{menuitems}
)
}