第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

創(chuàng)建動(dòng)態(tài)類(lèi)名,然后使用 Reactjs 遞增值

創(chuàng)建動(dòng)態(tài)類(lèi)名,然后使用 Reactjs 遞增值

慕標(biāo)琳琳 2021-10-21 13:25:52
我有一個(gè)呈現(xiàn)列表的組件。每個(gè)項(xiàng)目都有一個(gè)類(lèi)名。我的問(wèn)題是如何動(dòng)態(tài)添加類(lèi)名,后跟遞增值。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 中,它應(yīng)該是這樣的:<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貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊

這很簡(jiǎn)單 =)


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 表達(dá)式{ - expression code lives here - }。您可以在大括號(hào)之間放置任何有效的JS 表達(dá)式。


查看完整回答
反對(duì) 回復(fù) 2021-10-21
?
呼啦一陣風(fēng)

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超6個(gè)贊

嘗試這個(gè) :


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

    )

}


查看完整回答
反對(duì) 回復(fù) 2021-10-21
?
慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

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

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


查看完整回答
反對(duì) 回復(fù) 2021-10-21
  • 3 回答
  • 0 關(guān)注
  • 197 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)