Javascript Tic Tac Toe在单个框中渲染X

我使用React玩的井字游戏有点问题。因此，每次我点击电路板，我都有X渲染，我希望它这样做。但我只想这样。在一个正方形中渲染它们，而不是全部。我应该在这种特殊情况下使用setState，还是他们调用x的另一种方式

这是我的密码：

class App extends Component {
    render() {
        return (<div>
            <h1>TIC TAC TOE</h1>
            <ApplicationComponent/>
            <GridComponent/>
        </div>)
    }
}
class ApplicationComponent extends React.Component {

    render() {
        return (<div>Application Component</div>);
    }
    resetBoard() {
        console.log("resetBoard");
    }
    checkingWon() {
        console.log("checkingWon")
    }
}
class GridComponent extends React.Component {

    constructor() {
        super();
        this.state = {
            turn: '',
        };
    }
    setMark(i) {
        this.setState({turn: "X"
        })
    }

    render() {

        // empty object
        let grid = [];
        // set length for loop
        let length = 9;
        // loop through array and push in objects


        for(let i = 0; i < length; i++) {
            grid.push(<BoxComponent onUpdateNeeded={this.setMark.bind(this, i)} name={this.state.turn}/>);

        }

        // render
        return (

            <div className="grid">


                {grid.map(function(component, index){
                    return <div key={index}> {component} </div>;
                })}
            </div>
        );
    }
}

class BoxComponent extends React.Component {


    Clicked(event) {
        this.props.onUpdateNeeded();
        console.log(this);

    }

    render() {
        return (

            <div className="box" onClick={this.Clicked.bind(this)}>
                {this.props.name}

            </div>
        );
    }
}

export default App;

---

正如@fungusanthrax在评论中所说的，您必须将网格保存在state中。 基本上有一个带有框的列表，例如一个数组，在本例中，当单击时，该数组将在索引处填充当前的player/turn X/O

---

您可以看看这个。

您需要跟踪每个位置，可能是在对象中，因为它们更容易操作，然后相应地更新状态