ハードコーディングの代わりにReactJSの2つのループ

Question

ReactJS tutorial Tic-tac-toe gameで余分な演習を行います。

は今、私はこのコードを持っている：

class Board extends React.Component { 
renderSquare(i) { 
    return (
     <Square 
      value={this.props.squares[i]} 
      onClick={() => this.props.onClick(i)} 
     /> 
    ); 
} 

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

}

代わりの9回{this.renderSquare(x)}をハードコーディングし、私は2つのループまたは使用map(map())でそれらを交換したいです。しかし、私が書いていることは、それをハードコーディングするよりも悪く見えます。それを行うとハードコーディングを避けるより良い方法ですか？

Answer 1

ループを使用する主な理由は、ループがより一般的であるためです。

はここにいくつかの提案です：

あなたはループの制限としての役割を果たすことができる2つの変数に、行ごとの行や広場の量を保持することができ、その後、あなたのグリッドを調整するだけで、これらの2つの変数を更新する必要があります。

コードをいくつかの方法に分割すると、コードがクリーンアップされる可能性があります。

はここでループを有する例を示します

// these can also be passed in as `props` 
// if you want to use them like `<Board totalRows={3} squaresPerRow={3} squares={...}/>` 
const totalRows = 3; 
const squaresPerRow = 3; 

class Board extends React.Component { 
    renderSquare(i) { 
    // ... 
    } 

    renderRow(row) { 
    const squares = []; 
    const offset = row * squaresPerRow; // this makes sure first row is 0,1,2, second row is 3,4,5, etc. 
    for (let s = 0; s < squaresPerRow; s++) { 
     squares.push(
     this.renderSquare(offset + s); 
    ); 
    } 
    return (
     <div className="board-row"> 
     {squares} 
     </div> 
    ) 
    } 

    render() { 
    const rows = []; 
    for (let r = 0; r < totalRows; r++) { 
     rows.push(
     this.renderRow(r) 
    ); 
    } 
    return <div>{rows}</div>; 
    } 
} 

Answer 2

あなたは2つのマップ、各行を通過1と行の各項目を通過するものを作成することができます。

項目は任意に0, 1, 2などと設定されているので、ただ1つの配列で開始し、reduce()を使用してグループ化することができます。

これにより、行を指定することなく、すべての行に3つの項目を含める必要がなく、行を動的に追加することもできます。

---

このような何か：

class MyApp extends React.Component { 
 

 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     arr: [0, 1, 2, 3, 4, 5, 6, 7, 8] 
 
    }; 
 
    } 
 

 
    renderSquare(item) { 
 
    return <span>{item}</span>; 
 
    } 
 

 
    render() { 
 
    let arr = this.state.arr.reduce((acc, item) => { 
 
     let group = acc.pop(); 
 
     if (group.length == 3) { 
 
     acc.push(group); 
 
     group = []; 
 
     } 
 
     group.push(item); 
 
     acc.push(group); 
 
     return acc; 
 
    }, [[]]); 
 
    return ( 
 
     <div> 
 
     {arr.map(group => { 
 
      return (
 
      <div className="board-row"> 
 
       {group.map(item => this.renderSquare(item))} 
 
      </div> 
 
     ); 
 
     }) 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="myApp"></div>