在 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>
)