1. Azyklisches Rendering (hartcodiert)
render() {
return (
<div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
2. Doppelschleifen-Rendering (Kartenschleife)
render() {
const row = [ 0, 1, 2 ];
const col = [ 0, 1, 2 ];
return (
<div>
{row.map((e, index1) =>
<div key={e} className="board-row">
{
col.map((f, index2) =>
this.renderSquare(3 * index1 + index2)
)
}
</div>
)}
</div>
);
}
Vorsichtsmaßnahmen
1. Die Elemente in der Kartenschleife müssen das Schlüsselattribut festlegen
2. Verwenden Sie nach dem zyklischen Rendern von HTML-Elementen keine geschweiften Klammern {} = "