2つの異なるコンポーネントから同じ変数を更新する

Question

同じ状態変数count countを使用して、更新された変数を取得して取得したいと考えています。

1つのボタンと1つのラベルからなる上位コンポーネントとして次のコードを記述しました。どちらもカウントを更新しますが、別々のインスタンスがあります。では、変数の同じコピーを保持するためにコードを再整列する方法を教えてください。

const HOC = (InnerComponent) => class extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = { 
      count: 0 
     } 
    } 
    update(){ 
     this.setState({count: this.state.count + 1}) 
    } 

    render(){ 
     return(
      <InnerComponent 
       {...this.props} 
       {...this.state} 
       update = {this.update.bind(this)} 
      /> 

     ) 
    } 
}; 

class App extends React.Component { 
    render() { 
     return (
      <div> 
       <Button>Button</Button> 
       <hr /> 
       <LabelHOC>Label</LabelHOC> 
      </div> 
     ); 
    } 

} 

const Button = HOC((props) => <button onClick={props.update}>{props.children} - {props.count}</button>) 

class Label extends React.Component{ 
    render(){ 
     return(
      <label onMouseMove={this.props.update}>{this.props.children} - {this.props.count}</label> 
     ) 
    } 
} 

const LabelHOC = HOC(Label) 

export default App; 

Answer 1

「thinking-in-react」と入力する必要があります。

リアクションは単なるレンダリングライブラリであり、状態をレンダリングするので、その状態をどこで生かすべきかについて考える必要があります。あなたのシナリオでは、例えば、Reduxのように、この "真実の一つのソース"（1つの場所でのみ状態を維持する）を扱うことができるFluxライブラリを見てみるのが一般的です。 Reduxを使用している場合、Reduxストアは両方のコンポーネントの「カウント」状態を保持し、更新と読み取りの両方が可能なので、長期的には私の提案となります。しかし、あなたの直面する問題を解決するには、上位のコンポーネントに状態を保持させ、その状態を変更させなければなりません。状態を渡し、子プロセスに更新関数を渡します。

これは、どのように表示されるかのスニペットで、状態（カウント）と更新機能を子コンポーネントに送信するだけです。私はHOCコンポーネントを除外しています。なぜなら、ここであなたの混乱を招くからです。しかし、私はあなたがそれがどのように機能するか想像できると確信しています。 :)

class App extends React.Component { 
    constructor(){ 
     super(); 
     this.state = { 
      count: 0 
     } 
    this.update = this.update.bind(this); //Bind it once 
    } 
    update(){ 
     this.setState({count: this.state.count + 1}) 
    } 
    render() { 
     return (
      <div> 
       <Button count={this.state.count} update={this.update}>Button</Button> 
       <hr /> 
       <LabelHOC count={this.state.count} update={this.update}>Label</LabelHOC> 
      </div> 
     ); 
    } 
} 

良いドキュメントから読み取ります

Components and props

Data flows down