ReactJS中的兩個循環代替硬編碼

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

}

而是硬編碼{this.renderSquare(x)} 9次，我想有兩個迴路來替代它們或使用map(map())。但是，我寫的所有內容都比硬編碼更糟糕。這是一個更好的方式來做到這一點，並避免硬編碼？

Answer 1

使用循環的主要原因可能更好是因爲循環更通用。

下面是一些建議：

可以持有兩個變量，可以作爲循環的限制，然後調整網格只需要更新這兩個變量每行的行和廣場的量。

將代碼拆分成幾個方法也可能會將其清理乾淨。

下面是用循環的例子：

// 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個地圖，一個是通過每一行去和一個通過每個項目在一排去。

由於項目只是任意設置爲0, 1, 2等，您可以只用一個數組開始，並使用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>