亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

創建動態類名,然后使用 Reactjs 遞增值

創建動態類名,然后使用 Reactjs 遞增值

慕標琳琳 2021-10-21 13:25:52
我有一個呈現列表的組件。每個項目都有一個類名。我的問題是如何動態添加類名,后跟遞增值。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>
查看完整描述

3 回答

?
慕仙森

TA貢獻1827條經驗 獲得超8個贊

這很簡單 =)


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 表達式。


查看完整回答
反對 回復 2021-10-21
?
呼啦一陣風

TA貢獻1802條經驗 獲得超6個贊

嘗試這個 :


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>`

    )

}


查看完整回答
反對 回復 2021-10-21
?
慕斯王

TA貢獻1864條經驗 獲得超2個贊

您可以使用名為classnames 的包或:

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


查看完整回答
反對 回復 2021-10-21
  • 3 回答
  • 0 關注
  • 198 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號