状态提升
同时获取多个子组件数据,或者两个组件之间需要相互通讯的情况时,需要把子组件的 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 })
}