import * as React from 'react' ; import { IToastState , IToastMsg } from '../Type/Type' ; import "./Toast.scss" ; import { connect } from "react-redux" ; import actionsStore from 'src/redux/actions/actions' ; import { Action , ActionFunction1 } from 'redux-actions' ; import { ShowPopoveType } from '../Type/ReduxType' ; const mapStateToProps = ( state ) => ( { toast : state . toast } ) ; const mapDispatch = ( dispatch ) => { return { changeToastState : ( payload ) => dispatch ( actionsStore . setToastStatus ( { ... payload } ) ) , } ; } ; class Toast extends React . Component { public state : IToastState ; public timer : NodeJS . Timeout ; constructor ( props ) { super ( props ) ; this . state = { addAnimate : false , toastMsg : { duation : 3000 , msg : '暂不支持此登陆类型' , show : false } } ; } public async componentDidMount ( ) { this . timer = await this . changeAnimateStatus ( 5000 , false ) ; } param time public async changeAnimateStatus ( time , status ) { const self = this ; return await setTimeout ( ( ) => { self . setState ( { toastMsg : { duation : 3000 , msg : '暂不支持此登陆类型' , show : status } } ) ; self . props [ 'changeToastState' ] ( self . state . toastMsg ) ; } , time ) ; } public componentWillUnmount ( ) { clearTimeout ( this . timer ) ; } public render ( ) { return ( < div className = { [ "toast" , 'iconfont icon-xiaoxi-jinggao' , this . props [ 'toast' ] [ 'show' ] ? 'addAnimate' : '' ] . join ( ' ' ) } > { this . props [ 'toast' ] [ 'msg' ] } < /div>); } } export default connect ( mapStateToProps , mapDispatch ) ( Toast ) ;