React学习之——状态提升

Posted 芜独独

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React学习之——状态提升相关的知识,希望对你有一定的参考价值。

React文档之状态提升链接链接: link.

状态提升:

在 React 中,将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中,便可实现共享

实现一个华氏度和摄氏度的转换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <div id="root"></div>

  <script type="text/babel">

  // 状态提升:
  // 在 React 中,将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中,便可实现共享 state。
    
    //  定义键值对
    const scaleNames = {
      c:'Celsius',
      f:'Fahrenheit'
    }

    // 将华氏度转换为摄氏度
    function toCelsius(fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }

    // 将摄氏度转换为华氏度
    function toFahrenheit(celsius) {
      return (celsius * 9 / 5) + 32;
    }

    // 温度转换
    function tryConvert(temperature,convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }

    // 判定水开了没有
    function BoilingVerdict(props) {
      if (props.celsius >= 100) {
        return <p>The water would boil .</p>
      }
      return <p>The water would not boil</p>
    }
    
    // 温度输入组件
    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        // this.state = {temperature:''};
      }

      handleChange(e) {
        // this.setState({temperature:e.target.value});
        this.props.onTemperatureChange(e.target.value);
      }

      render() {
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input 
            value={temperature}
            onChange={this.handleChange}
            />
          </fieldset>
        )
      }
    }

    // 计算组件
    class Caculator extends React.Component {
      constructor(props) {
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {temperature:'',scale:'c'};
      }

      handleCelsiusChange(temperature) {
        this.setState({scale:'c',temperature});
      }

      handleFahrenheitChange(temperature) {
        this.setState({scale:'f',temperature});
      }

      render() {
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        const celsius = scale === 'f' ? tryConvert(temperature,toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature,toFahrenheit) : temperature;
        return (
          <div>
            <TemperatureInput
             scale='c'
             temperature={celsius}
             onTemperatureChange={this.handleCelsiusChange} />
            <TemperatureInput
             scale='f'
             temperature={fahrenheit}
             onTemperatureChange={this.handleFahrenheitChange} />
             <BoilingVerdict
               celsius={parseFloat(celsius)} />
          </div>
        )
      }
    }

    ReactDOM.render(<Caculator />,document.getElementById('root'))
  </script>
</body>
</html>

效果截图

在这里插入图片描述
在这里插入图片描述

以上是关于React学习之——状态提升的主要内容,如果未能解决你的问题,请参考以下文章

React学习之——状态提升

React学习之——状态提升

React.js学习之理解JSX和组件

react学习之jsx的使用

react-native学习之入门app

react native 学习之 native modules