React--井字棋实战（6）

访问 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
        })
    }

测试截图

完成以上实操，谢谢~