状态提升
1. 状态提升的作用
通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去
2. 状态提升的使用
import React from 'react'
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
/* 将子元素或是子组件共同使用到的state定义在共同的父级中 */
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
return (
<fieldset>
<legend>Enter temperature in Celsius:</legend>
{/* input也要使用状态 */}
<input
value={temperature}
onChange={this.handleChange}
/>
{/* BoilingVerdict也要使用这个数据 */}
<BoilingVerdict
celsius={parseFloat(temperature)}
/>
</fieldset>
);
}
}