在哪里處理父子事件React

Question

我正在開始使用React基本概念，但不確定如何繼續...

我正在嘗試構建一個簡單的Minesweeper游戲，我的結構是一個MinesweeperField包裝器，其中高度，寬度和minesNumber作為道具，以及一個MinesweeperTile，其值（它是一個地雷/近距離地雷的數量）並作為道具進行了探索。

我的問題是，我不確定如何處理點擊圖塊。 當探索圖塊以處理新的游戲狀態時（例如，如果游戲結束或獲勝），必須通知MinesweeperField組件，並且它還必須能夠觸發其他圖塊中的探索（例如，如果單擊具有0個近地雷的圖塊，則必須自動探索所有相鄰的圖塊）。

據我了解，有兩種方法：

• 處理在Tile上的單擊，Tile通知Field，Field觸發器也在相鄰的Tile上進行探索-從Tile通知Field很容易，但是從Field調用Tile則需要使用引用，並且為每個Tile實例化一個不同的單擊處理函數
• 處理Field上的單擊，Field更新在render中用於將isExplored prop分配給Tile的道具-由於我基於Field狀態下的數組變量渲染Tile，因此我必須使用setState觸發子Tile的重繪組件。

這是“ Handle Click on Field”版本中的渲染功能的簡化示例：

return (
            <div className="minesweeper-wrapper">
                <div className="minesweeper-field" style={this.getDimensions()}>
                    {this.state.proximityMap.map(function(verticalRow, vIndex){
                        return verticalRow.map(function(tileValue, hIndex){
                            return <MinesweeperTile value={tileValue} hIndex={hIndex} vIndex={vIndex} onClick={this.exploreTile.bind(this, vIndex, hIndex, tileValue)} isExplored={this.state.explorationMap[vIndex][hIndex]} />
                        });    
                    })}
                </div>
            </div>
        );

這是explorerTile函數：

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

this.state.proximityMap包含一些值，這些值指示有多少地雷靠近該圖塊/該圖塊是否是地雷。 this.state.explorationMap包含指示已瀏覽哪些圖塊的this.state.explorationMap值。

根據我的理解，這種方法的問題在於，如果我想重繪單個圖塊，則必須在Field上調用setState並更新this.state.explorationMap數組，該數組將重繪每個圖塊！

關於如何將重繪限制為單個圖塊的任何想法？ 我應該繼續探索“點擊字段處理”方式還是回到“點擊瓷磚處理”？

我從“單擊瓷磚上的手柄”開始，但是在遇到“探索相鄰瓷磚”問題時我停了下來。

另外，請不要使用jQuery / js技巧或駭客以非常規的方式解決此問題，這不是找到一種方法來實現，而是找到最合適的方法。 在掃雷游戲的背景下，它可能不會產生明顯的變化，但是正如我所說的，這是出於訓練目的:)

Answer 1

最合適的方法是讓父母處理更改。 孩子們只需要知道被點擊時給誰打電話以及他們的樣子。 我使用React在生命游戲克隆中做了同樣的事情。

CodePen鏈接

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