Question

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

句柄点击方法需要访问tile的x和y坐标，我可以从board类中获取，但是我希望该方法激活tile类中按钮的onClick。

我想将 handleClick 方法从游戏传递到棋盘，跟踪指标，并获取要在 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。

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

1 个答案: