Question

这是我的组件下面包含两个按钮（递减，递增），我希望当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;？

Answer 1

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

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

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

1 个答案: