React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件.
//子组件1,接收父组件的状态
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>water boil</p>;
}
return <p>not boil.</p>;
}
//子组件2,接受父组件状态
function ZhBoilingVerdict(props) {
if (props.celsius === 100 ) {
return <p>水是100度的</p>
}
return <p>水不是一百度的</p>
}
//定义组件
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
//初始化状态值
this.state = {temperature: ''};
}
// 触发状态值的fn
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
return (
<fieldset>
<legend>Enter temperature in Celsius:</legend>
<input
value={temperature}
onChange={this.handleChange} />
<BoilingVerdict
celsius={parseFloat(temperature)} />
<ZhBoilingVerdict
celsius={parseFloat(temperature)}/>
</fieldset>
);
}
}
ReactDOM.render(
<Calculator />,
document.getElementById('root')
);