Javascript 为React中的多个元素减少相同功能的代码

如何减少一堆代码并在一行中的某个地方设置函数setShowMenu

<li className="listItem" onClick={() => setShowMenu(!showMenu)}>HOME</li>
<li className="listItem" onClick={() => setShowMenu(!showMenu)}>PRODUCTS</li>
<li className="listItem" onClick={() => setShowMenu(!showMenu)}>ABOUT</li>
<li className="listItem" onClick={() => setShowMenu(!showMenu)}>CONTACT</li>

setShowMenu（！showMenu）}>HOME
setShowMenu（！showMenu）}>产品
关于
setShowMenu（！showMenu）}>联系人

const list=[“HOME”、“PRODUCTS”、“ABOUT”、“CONTACT”].map（list=>
setShowMenu（！showMenu）}>{{list}
）
返回(
{{lists}}
)

有几种方法。一种方法是使用数组：

// Somewhere it's created only once
const menu = ["HOME", "PRODUCTS", "ABOUT", "CONTACT"];

由于它们都使用相同的处理程序，因此只创建一个而不是四个（可能在组件渲染中）：

然后

{menu.map（item=>
{item}
）}

---

注意

键

，因为这是一个数组。

所有这些菜单项做相同的事情似乎很奇怪…？是的，它对所有列表项做相同的事情，在移动设备上单击其中一个列表项后，导航将消失

// Somewhere it's created only once
const menu = ["HOME", "PRODUCTS", "ABOUT", "CONTACT"];

const onClick = () => setShowMenu(!showMenu);

{menu.map(item => <li key={item} className="listItem" onClick={onClick}>{item}</li>)}