mobx觀察組件不觸發componentDidMount方法

這是我的組件下面包含兩個按鈕（遞減，增量），並且當AppState（Mobx）中的屬性(@observable number)等於10，並且數字更改mobx重新顯示時，我想要遞減按鈕被隱藏組件工作正常。mobx觀察組件不觸發componentDidMount方法

我把裏面的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只有在掛載後纔會觸發。但是，我怎樣才能以「高效的方式」來處理我的邏輯呢？

來源

2017-09-19 TyForHelpDude

componentDidMount在您描述的程序中只調用一次。（在安裝組件後）

不要試圖用css屬性隱藏/顯示按鈕。在渲染方法，而不是寫在JSX

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

所以你在這裏做，您使用的是三元運營商據此決定是否讓反應呈現按鈕或沒有（那麼它返回null）

這樣您的增量按鈕在數字===時自動隱藏10

來源

2017-09-28 19:15:09 Daniel

mobx觀察組件不觸發componentDidMount方法

回答

相關問題