创建动态类名，然后使用 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) {&nbsp; &nbsp; const list = ['list1', 'list2', 'list3']&nbsp; &nbsp; const menuitems = list.map((list, index) => {&nbsp; &nbsp; &nbsp; &nbsp; return <li className={`menuitem item-${index + 1}`} key={index}>{list}</li>&nbsp; &nbsp; })&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <ul>{menuitems}</ul>&nbsp; &nbsp; )}它使用 JSX 表达式{ - expression code lives here - }。您可以在大括号之间放置任何有效的JS 表达式。

Answer 2

尝试这个 ：function Menu(props = null) {&nbsp; &nbsp; const list = ['list1', 'list2', 'list3']&nbsp; &nbsp; const menuitems = list.map((list, index) => {&nbsp; &nbsp; &nbsp; &nbsp; return `<li className="menuitem item-${index + 1}" key="${index}">${list}</li>`&nbsp; &nbsp; });&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; `<ul>${menuitems.join(" ")}</ul>`&nbsp; &nbsp; )}

Answer 3

您可以使用名为classnames 的包或：<li&nbsp;className={`menuitem-${index}`}&nbsp;key={index}>{list}</li>