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

Question

如何减少一堆代码并在一行中的某处设置函数 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>

Answer 1

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

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

Answer 2

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

// 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>)}

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

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

Reducing code for same functionality for multiple elements in React

javascript

html-lists

reactjs