減少 React 中多個元素的相同功能的代碼

Question

如何減少一堆代碼並將 function 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 ，因為這是一個數組。