创建动态类名，然后使用 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 表达式{ - expression code lives here - }。您可以在大括号之间放置任何有效的JS 表达式。

Answer 2

尝试这个 ：

function Menu(props = null) {

    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.join(" ")}</ul>`

    )

}

Answer 3

您可以使用名为classnames 的包或：

<li className={`menuitem-${index}`} key={index}>{list}</li>