ネイティブに反応します:州対小道具

反応で最も初心者を混乱させる質問.
小道具と州の違いは何ですか?
これを明らかにする.
小道具は、我々がコンポーネントに与えるデータを含みます.
状態には、そのコンポーネントに対してローカルまたはプライベートのデータが含まれます.したがって、他のコンポーネントはその状態にアクセスすることができません.
カウンタコンポーネントを持っていると言うことができます.

import React, { Component } from 'react';
import Counter from './counter';

class Counters extends Component {
  state = {
    counters: [
      {id: 1, value: 0},
      {id: 2, value: 0},
      {id: 3, value: 0},
      {id: 4, value: 0}
    ]
  };
    render() {
    return (
      <div>        
        { this.state.counters.map(counter =>
          <Counter key={counter.id} value={counter.value} id={counter.id}>
          </Counter>
          )
        }
      </div>
    );
  }
}

export default Counters;

renderコンポーネントのCountersメソッドを詳しく見てみましょう.

<Counter key={counter.id} value={counter.value} id={counter.id}></Counter>

ここで設定するすべての属性はpropsコンポーネントの入力です.
このコンポーネントのCounterにはアクセスできません.このコンポーネントはローカルで内部です.
小道具は、例えばstateコンポーネントを見てみましょう.

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    value: this.props.value
  };

  handleIncrement = product => {
    this.setState({value: this.state.value + 1});
  };

  render() {
    return (
      <div>
        <span className='badge badge-warning'>{this.state.value}</span>
        <button
          onClick={ () => this.handleIncrement({ id: 1 }) }
          className="btn btn-secondary btn-sm">click
        </button>
      </div>
    );
  }
}

export default Counter;

ヘルパーメソッドCounterを参照してください.

handleIncrement = product => {
  this.setState({value: this.state.value + 1});
};

handleIncrementの方法を更新すると、以下のようにhandleIncrementを更新します.

handleIncrement = product => {
  this.props.value = 0;
  // this.setState({value: this.state.value + 1});
};

そして、ビューでインクリメントします.

だから反応は、任意のコンポーネントに任意の小道具を変更することはできません.
コンポーネントのライフサイクル中に入力を変更したい場合は、その入力を取得し、props.valueメソッドで最初に行ったような状態にします.

handleIncrement = product => {
  this.setState({value: this.state.value + 1});
};

州と小道具についての詳細情報

stateとpropsについての詳細については、反応docs.