React学习之——状态提升

Posted 2022-10-14 芜独独

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学习之——状态提升的主要内容，如果未能解决你的问题，请参考以下文章