在React.js中使用渲染功能之外的循環

Question

我正在使用React.js構建一個跳棋游戲，並且我想創建一個循環來渲染“ Square”組件64次，以創建“ Board”組件。 在render函數內部運行.map函數時，我能夠正確渲染Square組件。 但是，我不喜歡在render函數中使用.map函數，而是想調用一個單獨的函數，在render函數中執行相同的操作。 當我將.map函數移到renderSquares函數中時，正方形不會被渲染。 有人可以解釋我在這里缺少什么嗎？ 謝謝。

import React, { Component } from "react";
import Square from "./Square";

class Board extends Component{
  constructor(){
    super()
    this.state = {
     myArray: Array(64).fill(null),
     checked: false
    }
    console.log(this.state.checked)
  }
  renderSquares(){
    this.state.myArray.map(function(obj, key){
      return <Square key={key} checked={this.state.checked} />
    }, this)
  }

  render(){
    return(
        <div className="wrapper">
          {this.renderSquares()}
        </div>
    )
  }
}

export default Board;

Answer 1

您的renderSquares缺少回報。

return this.state.myArray.map等。

Answer 2

當您在render函數中調用this.renderSquares() ，關鍵字this將不會引用renderSquares（）函數中的Board組件。 解決該問題的一種方法是使用bind：

{this.renderSquares.bind(this)}

我更喜歡另一種方式-使用箭頭功能：

代替使用renderSquares（），使用以下命令定義它：

renderSquares = () => { ... }

這樣，關鍵字this將正確地指代Board組件。 請注意，如果您沒有安裝正確的babel預設，則此方法可能不起作用（我始終確保使用以下babel預設： react, es2015, and stage-1 ）