javascript - Tic Tac Toe Rendering X 在一个盒子里

Question

使用 React 玩 Tic Tac Toe 游戏时遇到一些问题。因此，每次我单击面板时，我都会进行 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;

Answer 1

正如 @fungusanthrax 在评论中所说，您必须将网格保存在 state 中。基本上有一个包含框(例如数组)的列表，单击时会在索引处填充当前玩家/回合(在本例中为 X/O)。

你可以看看这个example .