Question

最近我开始练习React。我正在尝试创建一个简单的应用程序，该应用程序将根据我们每天使用多少瓶水来计算我们使用多少公斤塑料。通过此信息，我想展示一下我们每年使用的再生塑料可以生产出什么。

所以我有一个组件计算器：

class Calculator extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        resultNumber: null,
        resultKg: null
      }
    }


    count = (e) => {

      let val = e.target.value;
      let resultNumber = val * 52;
      let resultKg = Math.round(resultNumber * 0.04);
      this.setState({
        resultNumber: resultNumber,
        resultKg: resultKg
      })
    }

    render() {
      return ( <div >
        <Menu / >
        <div className = "component" >

        <h1 > I use < input type = "text" className = "input-data" onChange = {this.count}/>  bottles per week</h1 >

          <div className = "resultInfo" > {this.state.resultNumber != null ?
            <Info resultNumber = {this.state.resultNumber}
            resultKg = { this.state.resultKg } />  :null} < /div> 
</div>

          </div>
        )
      }

    }

我有一个显示结果的组件：

const Info = (props) => {
    return(
        <div>
        <div className="info">
        <div><p>{props.resultNumber} bottles per year</p>
        <img src={bottle1} />
        </div>

        <div><p>{props.resultKg} kg of plastic per year</p>
        <img src={trash} />
        </div>
       
         </div>
         <p><a href="/recycle">What could be produced out of {props.resultKg} kg of plastic?</a></p>
         </div>
    )
}

问题是我不知道如何将{props.resultKg}添加到另一个可以渲染的内容中：

const Recycle = (props) => {
   return({props.resultKg})
    }

最后一个组件当然返回“ undefined”。

我试图学习Redux，但是它变得势不可挡，我变得更加困惑。您能帮我了解如何从回收组件中的计算器获取状态吗？

Answer 1

最后，我必须学习Redux才能做到。：）

从孩子到孩子反应道具

1 个答案: