mobx observer composant pas déclencher componentDidMount méthode

Question

Ceci est mon composant ci-dessous contient deux bouton (décrément, incrément) et je veux que le bouton de décrémentation soit caché quand une propriété (@observable number) dans AppState (Mobx) vaut 10 et quand le nombre change mobx rerender le composant fonctionne bien.

Je mis un débogueur à l'intérieur 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> 

     ) 
    } 
} 
    } 

on s'y arrête à seulement après la charge page qui est logique, mais je dois faire ce vérifier chaque numéro de temps modifié.

Édité: il est logique que mobx fonctionne de cette façon, componentDidMount ne se déclenche qu'une fois monté. Mais alors comment puis-je gérer ma logique de manière "efficace"? ComposantDidMount n'est appelé qu'une seule fois dans le programme que vous avez décrit.

Answer 1

(après le montage du composant)

N'essayez pas de masquer/afficher le bouton avec les propriétés css. plutôt écrire dans votre méthode render dans le JSX

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

Alors ce que vous faites ici, vous utilisez un opérateur ternaire pour décider wether de laisser réagir rendre le bouton ou non (il retourne null)

De cette façon, votre bouton d'incrémentation est masqué automatiquement lorsque le numéro === 10