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

编程问答 2022-05-14

问题描述

如何减少一堆代码并将函数 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>

解决方法

const lists = ["HOME","PRODUCTS","ABOUT","CONTACT"].map(list => <li className="listItem" onClick={() => setShowMenu(!showMenu)}>{{list}}</li> )

return (
    <div>
       {{lists}}
    </div>
)
,

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

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

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

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

然后

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

注意 key，因为这是一个数组。

html-listsjavascriptreactjsreactjsreactjsreactjs