使用React JS的井字游戲

Question

我是Web開發領域的新手，尤其是React JS。 在這里，我正在嘗試使用React JS創建一個Tic-Tac-Toe游戲。 問題是當我嘗試單擊時，它也會更改所有其他組件，而不僅僅是一個。 我知道這是因為我將狀態傳遞給所有divs ，但是我不知道如何僅更改單擊的組件。

我進行了很多搜索，發現很多使用React JS的Tic-Tac-Toe游戲，但我不知道它們的工作方式（主要是因為.map() ）。 你們能幫我提供示例和解釋的原因嗎？ 有人可以解釋.map()在React JS中如何工作。 我知道.map()通常是如何工作的，但是使用React JS代碼我真的很困惑。

var Game = React.createClass({
getInitialState: function() {
    return {
        status: " ",
        turn: 'o',
        clicks: 0
    };
},


clickHandler: function() {
    var newClicks = this.state.clicks + 1;
    var newMark = newClicks%2 ? 'X' : 'O';
    if ((status === 'X' || status === 'O')){
        return;
    }
    this.setState({
        status: newMark,
        clicks: newClicks
    });
},

render: function() {
    return <div> 
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>

    </div>
}
});

React.render(
<Game />, document.getElementById('container')
);

Answer 1

在React和其他地方，Map的工作沒有任何不同。 這是轉換數組的一種方法。 假設您要使用map輸出：

var Game = React.createClass({

    onClick: function(event) {
        console.log(event.target);
    },

    render: function() {
        var tiles = [
            { number: 1 },
            { number: 2 },
            { number: 3 },
            { number: 4 },
        ];

        var tileNodes = tiles.map(function(tile) {
            return <div onClick={this.onClick} className="tile">{tile.number}</div>
        });

        return <div className="tileContainer">{tileNodes}</div>
    }
});

在這里，我們采用一個稱為tile的數組，並將其內容映射到div數組。 然后，我們可以將其放入tileContainer div中。 重要的是，將React事物與與Map相關的事物分開！

Answer 2

如果您不想重新渲染組件，則可以在componentShouldUpdate中執行檢查

生命周期方法。