ReactJS - zwei Schleifen?

Question

Gibt es die Möglichkeit, 2 (oder mehr) Schleifen in einer Komponente zu verwenden? Wenn ich eine Karte verwenden:

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

Es zeigt propertly Feld 10-mal, aber wenn ich Schleife innerhalb dieser Schleife schreiben:

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

es zeigt nichts (ohne Fehler) :( Bitte helfen . ich bin Anfänger in Verständnis reactjs

Answer 1

Sie zusätzliche {} dass entfernen verwendet, {} sind erforderlich, wenn Sie eine Berechnung tun wollen, hier Sie wollen einfach nur das Ergebnis return von innen map, dort {} werden nicht benötigt. Sie müssen es so schreiben:

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

Oder die return innerhalb map verwenden, wenn {} verwendet wird, wie folgt aus:

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

Answer 2

eine Rückkehr statment

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

oder entfernen Verwenden Sie den Innen {}

Answer 3

entfernen Sie die zusätzliche Halterung

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

in jsx, wenn Sie einen Bereich schreiben, dass Sie Sie die geschweifte Klammer verwenden ausgewertet werden soll {}. Sie verschachteln geschweifte Klammern nicht, weil Sie sich bereits in einer Gruppe befinden, die ausgewertet werden soll. aka Sie wollen nur eine geschweifte Klammer Gruppe für Javascript-Auswertung