React状态提升[日常搬砖]

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