mobx观察组件而不是trigg componentDidMount方法

时间:2017-09-19 11:20:32

标签: reactjs mobx-react

这是我的组件下面包含两个按钮(递减,递增),我希望当AppState(Mobx)中的属性(@observable number)等于10并且当数字更改mobx rerender组件时,隐藏递减按钮细

我在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仅在挂载后触发。但是,我怎样才能以高效的方式处理我的逻辑&#34;?

1 个答案:

答案 0 :(得分:2)

componentDidMount仅在您描述的程序中调用一次。 (安装组件后)

不要试图隐藏/显示带有css属性的按钮。 而是在jsx中的render方法中写入

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

那么你在这里做什么,你正在使用一个三元运算符决定是否让反应渲染按钮(然后它返回null)

这样,当数字=== 10

时,您的增量按钮会自动隐藏