React 裡面的循環

05-09

最近在做一個日曆組件，我將年月日按照規則封裝在了一個 json 對象裡面。但是在頁面渲染時需要好幾層 for 循環才能達到我想要的效果。之前在寫 React 組件時，一般利用 map 方法就可以滿足我的需求了，但是這次似乎好像不太對。下面來看看在 React 裡面有幾種方式可以循環呢？

在還未了解這些方法之前，我們先看一個小例子：

for(let i = 0; i < 3; i++){ for(let j = 0; j < 2; j++){ console.log(i+:+j) }}result:0:00:11:01:22:12:2

如果我在第二層 for 循環時，直接 return console.log 會輸出什麼呢？

function a() { for(let i = 0; i < 3; i++){ for(let j = 0; j < 2; j++){ return console.log(i+:+j) } }}a()result:0:0

注意：

for 循環裡面直接 return 的話，會阻斷循環的進程
return 需要在函數內才能執行，所以外層包了一個函數

上面的例子是我之前犯的錯誤，我在 React 裡面利用循環後，直接 return 了 html 的代碼，所以中斷了循環的內容。下面我們來看看在 Jsx 中正確的書寫方式是什麼樣的呢？

方法1:

let arr = []for(let i = 0; i < 3; i++){ arr.push(<span></span>)}return arr<div>{ arr }</div>result:<div> <span></span> <span></span> <span></span></div>

方法2:

<div> { [...Array(3)].map((item, index) => { return ( <span></span> ) }) }</div>這種方式還是利用 map 方法，設定了循環的總數量為 3，item 是沒有實質含義的但是需要佔位使用。

在回答鏈接中還給出了其他幾種方式，可以進行參考，後續我會根據每種方式寫一個demo來驗證，更新總結內容...

可以參考 Stack OverFlow 中關於此問題的回答：loop inside React JSX