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

Question

So I am currently programming a game of 3D chess in React javascript. I have a Game class, a Board class, and a Tile class. The game class holds all of the boards, and I want it to be where my handleClick method is. The board class is a 2D arrays of Tiles, and the Tile class is basically just a colored button.

The handle click method needs access to the x and y coordinates of the tile, which I can get from the board class, but I want the method to activate onClick of the button in the tile class.

I want to pass the handleClick method from game to board, keep track of the indicies, and get the function to be called onClick of the Tile.

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

I have simplified the code so that it is easier to read.

I am not sure how to do this. I think there may be a way to do this with fat arrow notation, but I am not sure how. Any help would be greatly appreciated

Answer 1

To solve your issue, do the following:

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

And you could rename the render_board(onClick) method to render({onClick}) , to allow writing
<Board onClick={handle_click} /> instead of
{this.state.board.render_board(/*I want to send the handle click method here*/)} .
This way you're using React more like it is designed.