使用 React JS 的井字游戏

Question

我是网络开发领域的新手，尤其是 React JS。在这里，我尝试使用 React JS 创建一个 Tic-Tac-Toe 游戏。问题是当我尝试单击时，它也会更改所有其他组件，而不仅仅是一个。我知道这是因为我将状态传递给所有 divs，但我不知道如何更改仅单击的组件。

我搜索了很多，找到了很多使用 React JS 的井字游戏，但我无法弄清楚它们是如何工作的（主要是因为 .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

Map 在 React 中的工作方式与其他地方没有任何不同。这是一种转换数组的方法。假设你想用 map:

输出你的 s

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

在这里，我们使用一个名为 tiles 的数组，并将其内容 map 到 div 的数组。然后我们可以将其放入 tileContainer div。将 React 事物与与地图相关的事物分开很重要！

Answer 2

如果您不希望组件重新呈现，您可以在 componentShouldUpdate

中执行检查

生命周期方法。

使用 React JS 的井字游戏

Tic-Tac-Toe using React JS

javascript

reactjs