React--井字棋实战（6）

最新推荐文章于 2022-07-14 11:57:30 发布

原创最新推荐文章于 2022-07-14 11:57:30 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #reactjs #webkit #javascript #webpack

笔记同时被 3 个专栏收录

150 篇文章

订阅专栏

橘子太酸辣

118 篇文章

订阅专栏

操作手册

38 篇文章

订阅专栏

本文介绍了如何使用React构建一个井字棋游戏。通过修改Board组件的renderSquare方法来处理棋盘格的点击事件，同时在Game组件中添加构造器和更新render函数以维护游戏状态。此外，还实现了juziClick函数来处理玩家的点击操作，包括检查游戏是否结束和切换玩家。文章提供了详细的代码示例和测试截图，帮助读者理解React组件的状态管理和事件处理机制。

访问 `history` 的数据

修改Board组件中的renderSquare方法

  renderSquare(i) {
        return <Square value = { this.props.juzi[i] }
        onClick = {
            () => this.props.onClick(i)
        }
        />
    }

Game组件添加构造器

constructor(props) {
        super(props);
        this.state = {
            history: [{
                juzi: Array(9).fill(null),
            }],
            juziIsNext: true
        }
    }

更新 Game 组件的 `render` 函数

 render() {
        const history = this.state.history;
        const current = history[history.length - 1];
        const winner = calculateWinner(current.juzi);

        let flag;
        if (flag) {
            flag = '获胜者:' + winner;
        } else {
            flag = '下一个玩家：' + (this.state.juziIsNext ? '大橘子' : '小橘子')
        }

        return ( <
            div className = "game" >
            <
            div className = "game-board" >
            <
            Board juzi = { current.juzi }
            onClick = {
                (i) => {
                    this.juziClick(i)
                }
            }
            / > < /
            div > <
            div className = "game-info" >
            <
            div > { flag } < /div> <
            ol > { /* TODO */ } < /ol> < /
            div > <
            /div>
        );
    }

去除掉juziClick函数，在Game组件中创建juziClick函数

    juziClick(i) {
        const history = this.state.history;
        const current = history[history.length - 1];
        const juzi = current.juzi.slice();
        if (calculateWinner(juzi) || juzi[i]) {
            return
        }
        juzi[i] = this.state.juziIsNext ? '大橘子' : '小橘子';
        this.setState({
            history: history.concat([{
                juzi,

            }]),
            juziIsNext: !this.state.juziIsNext
        })
    }