dva控制元素动态消失隐藏

首先是component里面的jsx页面,这里用了AntDesigne的Alert

  {!this.props.selfInfo.hidden?(
        <span className={styles.updateSuccess}> 
        <Alert 
          message={this.props.selfInfo.msg} 
          type= {this.props.selfInfo.alertType} //"success" "erroe"
          closable
          onClose={onClose}
          showIcon
        />
      </span>):null
      }

  然后是component里state添加一个secon:3设置3秒消失

  if(this.props.selfInfo.hidden!=true)
    {
     
      let timer = setInterval(() => {
        this.setState((preState) =>({
          seconds: preState.seconds - 1,
        }),() => {
          if(this.state.seconds == 0){
            clearInterval(timer);
          }
        });
      }, 1000)
    }
    if (this.state.seconds === 0) {
      this.props.selfInfo.hidden=true;
      if(this.props.selfInfo.msg=="获取用户登录信息失败"){
        this.props.dispatch(routerRedux.push({
          pathname: "/"
        }))
      }
      this.setState({seconds:3});
    }

然后models里面state

hidden:true,
alertType:"None",
msg:"None",

再在models里面写个更改方法

  updateStatus(state, action) {
      return { 
        ...state,
        hidden:action.hidden,
        alertType:action.alertType,
        msg:action.msg,
       
       };
    },
yield put({ type: 'updateStatus' ,hidden:false,alertType:"error",msg:response.data.msg});
调用就好了。

原文地址:https://www.cnblogs.com/marvelousone/p/10675207.html