我如何增加React Prop

Question

介紹

您好，我正在嘗試為我的在線商店構建計數器組件，但是我無法使其正常運行。

問題

據我了解， 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>
    );
  }
}

Answer 1

因此，我知道您已將此問題標記為已回答，但我想向您解釋這個概念。這是一個簡單但非常重要的概念。

試想一下兩個功能

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}/>
    }
}

因此，現在我們找到了一種安全的方法來維持我們的反應組件中的“狀態計數”。 接下來，我們需要一種更新它的方法。 這意味着孩子需要與父母進行一些向上溝通，因為狀態在父母組件內部。

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> 
    }
}

您只需要在您的應用中修改此學習內容即可。 祝好運！

Answer 2

您不能像這樣更改react Prop 。 您可能需要的是狀態

道具僅從父組件傳遞到子組件，並且如果要更改道具，則該道具應在父組件中發生。

在此處檢查State和Props之間的區別： https : //reactjs.org/docs/faq-state.html

Answer 3

我同意“在此處檢查狀態與道具之間的區別： https ： //reactjs.org/docs/faq-state.html ”。 但是，您還應該重新排列組件，以便將state和setState放在一個組件中，因為如果您不使用Redux，則狀態是本地的。 我建議閱讀這篇文章https://medium.freecodecamp.org/get-pro-with-react-setstate-in-10-minutes-d38251d1c781

順便說一句，如果您使用Redux，則可以通過reducers保留布局並設置狀態。 現在，您可以使用mapStateToProps在狀態更改時更新道具。