React与使用Bootstrap模态框的注意

 RorinL     2022年07月17日 星期日 14:36:44     JavaScript   React      JavaScript   js   React    

一个依靠全局状态的组件Login,通过监听props变化(redux-state),来实现是否隐藏Bootstrap模态框

  //...
  loginModel = null;

  componentDidMount(){
    this.loginModel = new bootstrap.Modal(document.getElementById('loginModel'));
  }
  //...
  componentWillReceiveProps(props) {
    //监听是否打开登录框
    if(props.showlogin){
      this.loginModel.show();
    }else{
      this.loginModel.hide();
    }
  }

同时,登录完成将Model隐藏this.loginModel.hide();但是,发现这样使用得话是错误的:

unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

将其改为this.props.showLogin(false);(即dispatch修改全局state的showlogin属性);以实现通过componentWillReceiveProps来控制Model的显示或关闭;

可能由于Login根节点就是id=loginModel;在自定义方法里使用了this.loginModel.hide就报错,而在componentWillReceiveProps中使用就不会;

但报错具体原由暂不清楚,懂得伙伴(本站一个评论都没有🙃,好孤独)希望能留言;


暂无评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

CAPTCHAis initialing...