我有一个呈现列表的组件。每个项目都有一个类名。我的问题是如何动态添加类名，后跟递增值。
function Menu(props) {
const list = ['list1', 'list2', 'list3']
const menuitems = list.map((list, index) => {
return <li className="menuitem" key={index}>{list}</li>
})
return (
<ul>{menuitems}</ul>
)
}
在 DOM 中，它应该是这样的：
<ul>
<list class="menuitem item-1">list1</li>
<list class="menuitem item-2">list2</li>
<list class="menuitem item-3">list3</li>
</ul>
这很简单 =)
function Menu(props) {
const list = ['list1', 'list2', 'list3']
const menuitems = list.map((list, index) => {
return <li className={`menuitem item-${index + 1}`} key={index}>{list}</li>
})
return (
<ul>{menuitems}</ul>
)
}
它使用 JSX 表达式{ - expression code lives here - }。您可以在大括号之间放置任何有效的JS 表达式。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句