mobx 观察组件不触发 componentDidMount 方法

Question

这是我下面的组件，包含两个按钮（递减、递增），我希望当 AppState(Mobx) 中的属性(@observable number) 值等于 10 时隐藏递减按钮更改 mobx 重新渲染组件，它工作正常。

我在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 仅在安装后触发。但是我该如何处理我在 "efficient way" 中的逻辑？

Answer 1

componentDidMount在你描述的程序中只调用了一次。（挂载组件后）

不要尝试 hide/show 具有 css 属性的按钮。而是在 jsx

中写入你的渲染方法

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

所以你在这里做什么，你正在使用三元运算符来决定是否让反应渲染按钮（然后它 returns null）

这样当数字 === 10

时，您的递增按钮会自动隐藏

mobx 观察组件不触发 componentDidMount 方法

mobx observe component not trigg componentDidMount method

reactjs

mobx-react