Question

我开始使用React的基本概念，而且我不确定如何继续...

我试图构建一个简单的扫雷游戏，我的结构是一个MinesweeperField包装器，高度，宽度和minesNumber作为道具，还有一个MinesweeperTile，有价值（它是一个地雷/近地雷的数量）和探索道具。

我的问题是，我不确定如何处理点击瓷砖。在探索磁贴以处理新游戏状态时必须通知MinesweeperField组件（例如：在游戏结束或胜出的情况下），并且它还必须能够在其他磁贴中触发探索（例如，如果您单击具有0个近距离地雷的地砖，必须自动探索所有相邻的地块）。

据我所知，有两种方法：

Handle点击Tile，Tile通知Field，Field触发器也可以查看相邻的Tiles - 从Tile通知Field很容易，但是从Field调用Tile需要使用refs，并为每个Tile实例化一个不同的click处理函数
Handle点击Field，Field更新渲染中的prop用于将isExplored prop分配给Tile - 因为我根据Field状态中的数组变量渲染Tile，我必须使用setState触发重新绘制子Tiles组件。

这是渲染函数的简化示例，在＆＃34; Handle Click on Field＆＃34;版本：

exploreTile(vIndex, hIndex, tileValue) {
        this.unveilTile(vIndex, hIndex);
        if (tileValue < 0) {
            this.gameOver();
        } else {
            if (tileValue === 0) {
                this.propagateTileExplore(vIndex, hIndex);
            }
        }
    }

这里是exploreTile函数：

this.state.proximityMap

this.state.explorationMap包含表示该瓷砖靠近多少个地雷的值/此瓷砖是我的。 left join包含指示已探索过哪些图块的bool。

我对这种方法的问题在于，根据我的理解，如果我想重绘单个图块，我必须在Field上调用setState并更新this.state.explorationMap数组，它将重绘每个图块！

关于如何将重绘限制为单个Tile的任何想法？我应该继续探索＆＃34;处理点击Field＆＃34;方式或回到＆＃34;处理点击Tile＆＃34;？

我开始用＆＃34;处理点击Tile＆＃34;但是当我到达＆＃34;探索相邻的瓷砖时，我就停了下来。问题

也请不要以非常规的方式解决这个问题的jQuery / js技巧或黑客，它不是要找到一种方法来做到这一点，而是找到最合适的方法。它不可能在扫雷游戏的背景下产生明显的差异，但正如我所说，它用于训练目的：）

Answer 1

最合适的方法是让父母处理更改。孩子们只需要知道在点击它们时应该给谁打电话以及它们应该是什么样子。我使用React在我的生命游戏克隆中做了同样的事情。

CodePen Link

changeTile(row, col) {
    if (!this.state.isPlaying) {
      const newTile = this.state.board[row][col] === 1 ? 0 : 1;
      const newRow = [...this.state.board[row]];
      newRow.splice(col, 1, newTile);
      const newBoard = [...this.state.board];
      newBoard.splice(row, 1, newRow);
      this.setState({
        board: newBoard
      });
    }
  }

在哪里处理亲子事件React

1 个答案: