2017-09-19 144 views
0

这是我的组件下面包含两个按钮(递减,增量),并且当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只有在挂载后才会触发。但是,我怎样才能以“高效的方式”来处理我的逻辑呢?

回答

2

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