ReactJS - 兩個循環？

是否可以在一個組件中使用2個（或更多）循環？當我使用一個地圖：ReactJS - 兩個循環？

<div className="board"> 
    {Array(height).fill(1).map((elh, h) => 
     <Field key={h}/> 
    )} 
</div>

這表明propertly場10次，但是當我寫的循環內循環：

<div className="board"> 
    {Array(height).fill(1).map((elh, h) => 
     {Array(width).fill(1).map((elw, w) => 
     <Field key={h}/> 
    )} 
    )} 
</div>

它說明不了什麼（有沒有錯誤）:( 請幫助。我初學者理解reactjs

來源

2017-04-17 K. A. T.

'Array（height）.fill（1）'這會返回什麼？ – aug

@aug它創建高度大小的數組，並填充「1」 –

您使用額外的{}當你想要做一些計算刪除，需要{}，在這裏你只是想return結果內部map，那裏不需要{}。你需要把它寫這樣的：

<div className="board"> 
    { 
     Array(height).fill(1).map((elh, h) => (
      Array(width).fill(1).map((elw, w) => <Field key={h}/>) 
     )) 
    } 
</div>

或使用return內map使用時{}，像這樣：

<div className="board"> 
    { 
     Array(height).fill(1).map((elh, h) => { 
      return Array(width).fill(1).map((elw, w) => <Field key={h}/>) 
     }) 
    } 
</div>

來源

2017-04-17 08:48:14

哇;）它現在的工作......非常感謝你:)順便說一句。你是否推薦任何reactJS課程？:) –

檢查文檔，其非常棒，以及它將覆蓋基本的一切：https：//facebook.github.io/react/docs/hello-world.html –

非常感謝:) –

使用返回statment

{Array(height).fill(1).map((elh, h) => 
     { return {Array(width).fill(1).map((elw, w) => 
        <Field key={h}/> 
       ) 
       } 
     } 
    )}

或刪除內{}

<div className="board"> 
    {Array(height).fill(1).map((elh, h) => 
     Array(width).fill(1).map((elw, w) => 
     <Field key={h}/> 
    ) 
    )} 
</div>

來源

2017-04-17 08:50:02

我用以下Youtube教程玩得開心，https://www.youtube.com/watch?v=MhkGQAoc7bc&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b。幫助我很多，因爲它很容易，從頭開始 –

刪除多餘的支架

<div className="board"> 
    { Array(height).fill(1).map((elh, h) => 
      Array(width).fill(1).map((elw, w) => <Field key={h}/>) 
     )) 
    } 
</div>

在JSX當你寫出來，你要評估你使用大括號的區域{}。你不要嵌套花括號，因爲你已經在一個評估組中。也就是你只想要一個花括號組用於javascript評估

來源

2017-04-17 08:50:12

ReactJS - 兩個循環？

回答

相關問題