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与其他任何地方都没有任何区别。它是转换数组的一种方法。假设你想输出你的地图：

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

中的检查

生命周期方法。

Tic-Tac-Toe使用React JS

2 个答案: