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

当您在渲染函数中调用this.renderSquares()时，关键字 this 将不会引用renderSquares（）函数内的Board组件。解决这个问题的一种方法是使用bind：

{this.renderSquares.bind(this)}

我更喜欢另一种方式 - 使用箭头功能：

不使用renderSquares（），而是使用：

定义它

renderSquares = () => { ... }

这样，关键字 this 将正确引用Board组件。请注意，如果您没有安装正确的babel预设，这种方法可能无效（我总是确保使用以下babel预设：react, es2015, and stage-1）

在React.js中使用render函数之外的循环

2 个答案: