Mobx beobachten Komponente nicht trigg componentDidMount-Methode

Question

Dies ist meine Komponente enthält zwei unten (Dekrement, Inkrement) und ich möchte Dekrement-Taste ausgeblendet werden, wenn eine Eigenschaft (@observable number) in AppState (Mobx) Wert entspricht 10 und wenn Nummer Mobx ändert render Komponente funktioniert es gut.

habe ich einen Debugger innerhalb componentDidMount,

@observer 
class Questions extends Component{ 
    constructor(props){ 
     super(props) 
     this.appState=this.props.appState 
    } 
    componentDidMount(){ 
    debugger 
     if(this.appState.num==10){ 
     document.getElementById("btnDecrement").style.visibility = "hidden"; 
     } 
     else{ 
     document.getElementById("btnDecrement").style.visibility = "block"; 
     } 
    } 
    ... 
    render(){ 

     return(
      <div> 
      ... 
      <button id="btnDecrement" onClick={()=>{this.appState.decrementNumber()}} type="button" className="btn btn-default btn-lg"> 
       Decrement 
      </button> 
      <button type="button" onClick={()=>{this.incrementNumber()}} className="btn btn-default btn-lg"> 
        Increment; 
       </button> 
      </div> 

     ) 
    } 
} 
    } 

es dort nach Seite nur Last stoppt, die bearbeitet Sinn, aber ich brauche, um dies zu überprüfen jedes Mal Nummer macht.

Bearbeitet: es macht Sinn mobx funktioniert auf diese Weise, componentDidMount löst nur aus, wenn es gemountet wurde. Aber wie kann ich dann hier "effizient" mit meiner Logik umgehen?

Answer 1

componentDidMount wird nur einmal in dem von Ihnen beschriebenen Programm aufgerufen. (nachdem die Komponente montiert wurde)

Versuchen Sie nicht, die Schaltfläche mit css-Eigenschaften zu verbergen/anzuzeigen. Statt in Ihrer Render-Methode in der jsx schreiben

render() { 
    return (
    ... 
    { this.appState.num === 10 ? 
     (<button 
     type="button" 
     onClick={()=>{this.incrementNumber()}} 
     className="btn btn-default btn-lg" 
     > 
     Increment; 
     </button>) 
     : null 
    } 
); 
} 

Also, was machen Sie denn hier, Sie sind einen ternären Operator, ob zu entscheiden, den Knopf lassen reagieren machen oder nicht (dann null kehrt)

Auf diese Weise wird Ihre Inkrementschaltfläche automatisch ausgeblendet, wenn die Nummer ===