将 function 参数作为参数传递并将参数传递给该 function？

Question

所以我目前正在用 React javascript 编写 3D 国际象棋游戏。 我有一个游戏 class、一个板子 class 和一个瓷砖 class。 游戏 class 包含所有板，我希望它位于我的 handleClick 方法所在的位置。 板子 class 是 Tiles 的 2D arrays，而 Tile class 基本上只是一个彩色按钮。

手柄点击方法需要访问磁贴的x和y坐标，我可以从板子class得到，但是我想要方法激活磁贴ZA2F2ED4F8EBC2CBB4C21A29DC40AB61中按钮的onClick。

我想将handleClick方法从游戏传递到棋盘，跟踪指标，并获得function被称为Tile的onClick。

class Tile {
  render(onClick) {
    return (
      <button 
        onClick={onClick}
      />);
  }
}


class Board {
  constructor() {
    this.state = {tiles: 
      [[new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile()],
       [new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile()],
       [new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile()],
       [new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile()],
       [new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile()],
       [new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile()],
       [new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile()],
       [new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile(), new Tile()]]
    }
  }

  // loops through all rows and calls render row and returns
  render_board = (onClick) => {
    const board = [];
    for (var i = 0; i < board_stats.height; i++) { 
      board.push(this.render_row(i, onClick));
    } 
    return board;
  }

  // loops through all tiles in row and calls render tile
  render_row = (i, onClick) => {
    const row = [];
    for (var j = 0; j < board_stats.width; j++) {
      row.push(this.render_square(i, j, onClick));
    }
    return <div className="board-row"> {row} </div>
  }


  render_tile(i, j, onClick) {
    return <Square
      onClick=/*I want to send the onClick method to the square with the parameters i and j*/
    />;
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      board: new Board()
    };
  }

  handle_click = (i, j) => {
    // Do Stuff
  }

  render() {
    return (
      <div className="game">
        <div className="game-board">
          {this.state.board.render_board(/*I want to send the handle click method here*/)}
        </div>
      </div>
    );
  }
}

我已经简化了代码，以便于阅读。

我不知道该怎么做。 我认为可能有一种方法可以用粗箭头符号来做到这一点，但我不确定如何。 任何帮助将不胜感激

Answer 1

要解决您的问题，请执行以下操作：

// In Board class
  render_tile(i, j, onClick) {
    return <Square
      onClick={() => onClick(i, j)}
    />;
  }

您可以将render_board(onClick)方法重命名为render({onClick}) ，以允许编写
<Board onClick={handle_click} />而不是
{this.state.board.render_board(/*I want to send the handle click method here*/)} .
这样你使用 React 就更像它的设计了。