在 React 元件中如何做迴圈
假設你有一個 React 元件和一個你想要迴圈處理的 items
陣列,以列印出所有的 “items”。
以下是你可以進行的方法。
在返回的 JSX 中,添加一個 <ul>
標籤來建立一個項目的清單:
return (
<ul>
</ul>
)
在這個清單內,我們使用花括號 {}
添加一個 JavaScript 的片段,並在這個片段內呼叫 items.map()
來迭代處理項目。
我們將一個 回呼函數 傳遞給 map()
方法,該函數將在清單的每個項目上被調用。
在這個函數內,我們返回一個包含陣列內容的 <li>
(清單項目),並設置 key
屬性為該項目在陣列中的索引。這是 React 所需的。
return (
<ul>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
你也可以使用隱含返回的簡寫形式:
return (
<ul>
{items.map((value, index) => <li key={index}>{value}</li>}
</ul>
)