javascript - 创建动态类名，然后使用 Reactjs 递增值

Question

我有一个呈现列表的组件。每个项目都有一个类名。我的问题是如何动态添加一个类名，后跟一个递增值。

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>

Answer 1

很简单=)

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 表达式 { - 表达式代码位于此处 - }。您可以放置​​任何有效的 JS expression在大括号之间。