如何解决为 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>
解决方法
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
,因为这是一个数组。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。