React--井字棋实战（4）

状态提升

同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。

重构 React 组件

将组件的 state 提升到父组件

在Board组件上添加构造函数并测试

 constructor(props) {
        super(props);
        this.state = {
            juzi: Array(9).fill(null),
        }
    }

修改Square组件中的render方法并去掉构造器函数

 render() {
        return ( <button className = "square"
            onClick = {
                () => { this.props.onClick() }
            } > { this.props.value } 
            </button>
        );
    }

修改Board组件中的renderSquare方法

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

运行报错截图

Board组件添加juziClick（）方法

juziClick(i) {
        const juzi = this.state.juzi.slice();
        juzi[i] = '大橘子';
        this.setState({ juzi })
    }

运行截图

请完成以上实操，切记：要动手~