更新來自兩個不同組件的相同變量

Question

我想使用相同的狀態變量說計數和更新並檢索更新的一個。

我寫了下面的代碼作爲由一個按鈕和一個標籤組成的高階組件。兩者都更新計數，但它們有單獨的實例。那麼如何重新調整我的代碼以保持變量計數的相同副本。

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」。

React只是一個渲染庫，它呈現狀態，所以你需要考慮一下這個狀態應該在哪裏生存。你的場景通常會開始查看某種能夠處理這種「真實來源」的Flux庫（只保留一個地方），例如Redux。如果您使用的是Redux，那麼Redux商店將爲這兩個組件保留「count」狀態，並且它們都可以更新並讀取它，所以這將是我的長期建議。但是爲了解決你當前的問題，你必須讓一個更高的組件保持狀態，然後當然也要修改該狀態，通過將狀態和更新函數作爲道具傳遞給孩子來做到這一點。

這是它的外觀片段，只需將狀態（count）和更新函數向下發送到子組件即可。我排除了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