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

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

TA貢獻1864條經驗 獲得超2個贊
您可以使用名為classnames 的包或:
<li className={`menuitem-${index}`} key={index}>{list}</li>
添加回答
舉報