mobx observeコンポーネントはトリガーしませんcomponentDidMountメソッド

Question

これは、AppState（Mobx）値が10に等しい(@observable number)のプロパティとnumberがmobx rerenderを変更したときに、2つのボタン（デクリメント、インクリメント）それはうまく動作するコンポーネントです。

私はそれが理にかなっているが、私はこれを編集するたびに番号を確認するために必要なページロード後のみであっ停止し、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> 

     ) 
    } 
} 
    } 

をデバッガを置きます。

編集されました：mobxはこのように動作します。componentDidMountは、一度マウントするとトリガーするだけです。しかし、ここで私のロジックを「効率的な方法」でどのように扱うことができますか？

Answer 1

componentDidMountは、記述したプログラムで1回だけ呼び出されます。 （コンポーネントを取り付けた後）

CSSのプロパティでボタンを表示/非表示にしないでください。 は、代わりに

ボタンをレンダリングするかどうかに反応できるように天気をを決定する三項演算子を使用しているあなたがここでやっている、だから、（それはnullを返します）あなたのJSX

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

方法をレンダリングに書きます

数値が=== 1

の場合、インクリメントボタンが自動的に非表示になります。