/

如何在 React JSX 中進行迴圈

如何在 React JSX 中進行迴圈

在 React 元件中如何做迴圈

假設你有一個 React 元件和一個你想要迴圈處理的 items 陣列，以列印出所有的 “items”。

以下是你可以進行的方法。

在返回的 JSX 中，添加一個 <ul> 標籤來建立一個項目的清單：

1
2
3
4
5
return (
 <ul>

 </ul>
)

在這個清單內，我們使用花括號 {} 添加一個 JavaScript 的片段，並在這個片段內呼叫 items.map() 來迭代處理項目。

我們將一個 回呼函數 傳遞給 map() 方法，該函數將在清單的每個項目上被調用。

在這個函數內，我們返回一個包含陣列內容的 <li> (清單項目)，並設置 key 屬性為該項目在陣列中的索引。這是 React 所需的。

1
2
3
4
5
6
7
return (
 <ul>
 {items.map((value, index) => {
 return <li key={index}>{value}</li>
 })}
 </ul>
)

你也可以使用隱含返回的簡寫形式：

1
2
3
4
5
return (
 <ul>
 {items.map((value, index) => <li key={index}>{value}</li>}
 </ul>
)