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') );