実装は、私たちが三目並べゲームを構築することができます公式サイトからリアクトのJSチュートリアル以下のよ三目並べ

Question

ため3X3の正方形マリックスボックスを作成するのJSを反応します。正方形のボックスは次のようにすべての正方形をハードコーディングすることによって作成される：

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> 
); 

}

Iは、以下に示すように、ループに使用してコードを短くするために管理：

render(){ 
let sqrRen = []; 
for(let i = 0; i < 9; i=i+3){ 
    sqrRen.push(<div className = "board-row"> 
    {this.renderSquare(0+i)} 
    {this.renderSquare(1+i)} 
    {this.renderSquare(2+i)} 
    </div>); 
} 
return (
    <div> 
    {sqrRen} 
    </div> 
); 

} しかし私はまた、次のように別のforループを使って各行に四角形を生成したい：

render(){ 
let sqrRen = []; 
for(let i = 0; i < 9; i=i+3){ 
    sqrRen.push(<div className = "board-row"> 
    { 
     for(let j=0;j<3;j++){ 
     this.renderSquare(j+i) 
     } 
    } 
    </div>); 
} 

return (
    <div> 
    {sqrRen} 
    </div> 
); 

} これは機能しません。次のエラーが表示されます。

2つのforループを使用する方法についてのご意見はありますか？

Answer 1

を試してみてください。代わりに、新しいES6の機能と構文を利用して、よりクリーンでわかりやすいアプローチを取る必要があります。以下

ソリューションがうまく3x3の三目並べボードをレンダリング：

import chunk from 'lodash/chunk'; 

const styles = { width: '40px', height: '40px', float: 'left', textAlign: 'center' }; 

return (

     <div className="tic-tac-toe-container"> 
      {chunk(new Array(9).fill(0), 3).map((item, itemIndex) => { 
       return (
        <div key={itemIndex} className="row"> 
         {item.map(col => <div className="col" style={styles}>COL</div>)} 
        </div> 
       ) 
      }) 
      } 
     </div> 
    ); 

Answer 2

コンソールで取得しているエラーは何ですか？私の最初の推測では、あなたのループでjを定義していないということです。あなたは、彼らは非常に厄介に見えるよう通常のforループを使用する必要はありません

let j=0

Answer 3

私もこれを探していたので、受け入れられた答えが正しい方向に私を指摘しました。私はロダッシュなしでやや異なる実装をしましたが。

render() { 
    const rowCount = 3, colCount = 3; 
    return (
    <div> 
     {[...new Array(rowCount)].map((x, rowIndex) => { 
     return (
      <div className="board-row" key={rowIndex}> 
      {[...new Array(colCount)].map((y, colIndex) => this.renderSquare(rowIndex*colCount + colIndex))} 
      </div> 
     ) 
     }) 
     } 
    </div> 
); 
}