我如何增加React Prop

时间:2019-03-21 17:54:04

标签: javascript reactjs

简介

您好,我正在尝试为我的在线商店构建一个计数器组件,但是我无法使其正常运行。

问题

据我了解,count值不会增加,因为它保留在同一实例中,并且在刚刚重新渲染的父组件中该值从未更改。声明变量并尝试在addOne()方法中进行局部递增也会导致该值保持不变。

问题

我对实例及其如何工作不了解,有人可以给我一些建议吗?

class ParentComponentClass extends React.Component {
  render() {
    const test = "Is anything printing?";
    let count = 0;
    return (
      <div>
        <QuantityCounter_CheckoutButton count={count} />
        <Test test={test} />
      </div>
    );
  }
}

class QuantityCounter_CheckoutButton extends React.Component {
  constructor(props) {
    super(props);
    this.addOne = this.addOne.bind(this);
  }
  addOne() {
    let qtyCount = this.props.count;
    qtyCount++;
    console.log(qtyCount);

  }

  render() {
    return (
      <div>
        <a href="#" id="bazuka_add" onClick={this.addOne}>
          <i className="material-icons ">add_circle_outline</i>
        </a>
        <a href="#" id="bazuka_remove" onClick={this.minusOne}>
          <i className="material-icons ">remove_circle_outline</i>
        </a>
        <p>qty:</p>
      </div>
    );
  }
}

3 个答案:

答案 0 :(得分:4)

所以我知道您已将此问题标记为已回答,但我想向您解释这个概念。这是一个简单但非常重要的概念。

想象一下两个功能

function manipulateCounter(count){
    count++
    console.log(count)
}

function counterContainer(){
    let countVariable = 0;
    manipulateCounter(countVariable);
    manipulateCounter(countVariable);
    manipulateCounter(countVariable);
    console.log(count);
}

我有一个调用增量器的容器。现在我的目标是增加“ countVariable”。但是我做的方式;我的递增逻辑已损坏。这是因为通过函数传递“值”,我只是传递值的副本,而不是操纵变量本身的方法。 (如果您传递一个对象,则完全是另外一个故事,但是值得另外写一篇博客文章)

道具也一样!您只是增加了发送给您的值的副本。而且,由于“ render(){}”意味着被称为纯函数,因此它的响应也变得更加复杂。简单来说,这意味着每次反应发生变化时,渲染器中的内容都会被破坏并从头开始重新运行。这意味着您无法在“渲染”内部维护计数器变量。

所以我们有两个问题。

  1. 找到一种在组件中正确维护“状态”的方法
  2. 找到一种更新此状态的方法。

这是React组件状态派上用场的地方!

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state ={
             count : 0;
        }
    }


    render (){
       <Child count={this.state.count}/>
    }
}

因此,现在我们找到了一种安全的方法来维持我们的react组件中的“状态计数”。接下来,我们需要一种更新它的方法。这意味着孩子需要与父母进行一些向上沟通,因为状态在父母组件内部。

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state ={
             count : 0;
        }
    }

    increment(){
        this.setState({ counts : this.state.count + 1});
    }   

    render (){
       return(<Child count={this.state.count} increment={this.increment.bind(this)}/>);
    }
}
  

这是一个非常强大的反应概念,它允许构建可重用的组件。孩子对父母如何管理一无所知   变量。它仅传递计数的当前值以及   该函数应在需要增加值时调用。

所以在我的孩子中,我只需要这样做...

class Child extends React.Component{
    render (){
       <div>
           <div>{this.props.count}</div>
           <button onClick={this.props.increment} >Increment</button>
       </div> 
    }
}

您只需要在您的应用中修改此学习内容即可。祝你好运!

答案 1 :(得分:1)

您不能像这样更改反应道具。您可能需要的是状态

仅将道具从父项传递给子组件,并且如果要更改道具,则该道具应在父项组件中发生。

在此处检查状态和道具之间的区别:https://reactjs.org/docs/faq-state.html

答案 2 :(得分:0)

我同意“在此处检查国家与道具之间的区别:https://reactjs.org/docs/faq-state.html”。但是,您还应该重新排列组件,以便将state和setState放在一个组件中,因为如果您不使用Redux,则状态是本地的。我建议阅读这篇文章https://medium.freecodecamp.org/get-pro-with-react-setstate-in-10-minutes-d38251d1c781

顺便说一句,如果您使用Redux,则可以保留布局并通过化简器设置状态。现在,您可以使用mapStateToProps在状态更改时更新道具。