Javascript 将函数参数作为参数传递，并将参数传递给该函数？

因此，我目前正在用javascript编写一个3D国际象棋游戏。我有一个游戏类，一个棋盘类和一个瓷砖类。game类包含所有的棋盘，我希望它位于handleClick方法所在的位置。board类是一个2D瓷砖阵列，而Tile类基本上只是一个彩色按钮

handleclick方法需要访问tile的x和y坐标，我可以从board类获得这些坐标，但是我希望该方法能够激活tile类中的onClick按钮

我想将handleClick方法从一个游戏传递到另一个棋盘上，跟踪标记，并获得在瓷砖的单击中调用的函数

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

类平铺{
渲染（onClick）{
返回(
);
}
}
班级委员会{
构造函数（）{
this.state={tiles:
[[new Tile（），new Tile（），new Tile（），new Tile（），new Tile（），new Tile（），new Tile（），
[新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），
[新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），
[新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），
[新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），
[新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），
[新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），
[新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（），新磁贴（）]
}
}
//循环所有行并调用render row和returns
渲染板=（onClick）=>{
const board=[]；
对于（var i=0；i{
常量行=[]；
对于（var j=0；j{
//做事
}
render（）{
返回(
{this.state.board.render_board（/*我想在这里发送句柄click方法*/）}
);
}
}

我简化了代码，以便更容易阅读

---

我不知道该怎么做。我认为可能有一种方法可以使用胖箭头符号来实现这一点，但我不确定如何实现。如果您有任何帮助，我们将不胜感激。要解决您的问题，请执行以下操作：

//在Board类中
渲染瓷砖（i、j、onClick）{
返回onClick（i，j）}
/>;
}

您可以将

render\u board（onClick）

方法重命名为

render（{onClick}）

，以允许写入

而不是

{this.state.board.render_board（/*我想在这里发送句柄click方法*/）}

---

通过这种方式，您可以更像设计一样使用React。

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

//在Board类中
渲染瓷砖（i、j、onClick）{
返回onClick（i，j）}
/>;
}

您可以将

render\u board（onClick）

方法重命名为

render（{onClick}）

，以允许写入

而不是

{this.state.board.render_board（/*我想在这里发送句柄click方法*/）}

---

这样，您使用的React更像是设计的。

我会解决将“onClick”放入上下文（）的问题，我会解决将“onClick”放入上下文（）的问题