Javascript 在何处处理父子事件

我刚开始学习React的基本概念，我不知道如何继续

我正在尝试建立一个简单的扫雷游戏，我的结构是一个扫雷场包装，以高度、宽度和地雷数量作为道具，以及一个扫雷工具，有价值（是一枚地雷/近距离地雷的数量）并作为道具进行探索

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

据我所知，有两种方法：

• 处理单击互动程序，互动程序通知字段，字段触发器也在相邻互动程序上进行探索-从互动程序通知字段很容易，但从字段调用互动程序需要使用REF，并且为每个互动程序实例化了不同的单击处理程序函数
• Handle click on Field，Field更新渲染中用于将isExplored道具指定给平铺的道具-由于我基于字段状态中的数组变量渲染平铺，因此我必须使用setState来触发子平铺组件的重画

这是渲染函数的简化示例，在“句柄单击字段”版本中：

返回(
{this.state.proximityMap.map（函数（verticalRow，vIndex）{
返回verticalRow.map（函数（tileValue，hIndex）{
返回
});    
})}
);

下面是exploreTile函数：

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

exploreTile（vIndex、hIndex、tileValue）{
这是一种新方法（vIndex，hIndex）；
如果（tileValue<0）{
这是gameOver（）；
}否则{
如果（tileValue==0）{
这是繁殖探索（vIndex，hIndex）；
}
}
}

this.state.proximityMap

包含指示有多少地雷靠近此磁贴/此磁贴是否为地雷的值

this.state.explorationMap

包含布尔值，指示已探索哪些磁贴

这种方法的问题是，据我所知，如果我想重画一个图块，我必须在字段上调用setState并更新this.state.explorationMap数组，它将重画每个图块

关于如何将重画限制为单个瓷砖，有什么想法吗？我应该继续探索“句柄单击字段”方式还是回到“句柄单击平铺”

我从“点击地砖”开始，但当我遇到“探索相邻的地砖”问题时，我停止了

---

另外，请不要使用jQuery/js技巧或黑客以非传统方式解决此问题，这不是要找到一种方法来解决此问题，而是要找到最合适的方法。在扫雷舰游戏的环境中，这可能不会产生明显的变化，但正如我所说的，这是出于训练目的：）

最合适的方法是让家长处理这些变化。孩子们只需要知道点击时给谁打电话，以及他们应该是什么样子。在我的生命克隆游戏中，我用React做了同样的事情

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

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