reactjs：在每个模块下定位提示内容展示，三秒后消失

import React, { Component } from 'react';
import classnames from 'classnames';

import './index.scss';

export class TipPopup extends Component {
    static propTypes: {
        content: PropTypes.string.isRequired,
        theme: PropTypes.string.isRequired,
        isShow: PropTypes.bool,
        interval: PropTypes.number,
        callbackParent: PropTypes.func,
    };

    constructor(props) {
        super(props);
        this.state = {
            isShow: this.props.isShow,
        };
    }

    componentWillMount() {
        this.openChangePopupTimer();
    }

    componentWillReceiveProps(nextProps) {
        const { isShow } = nextProps;
        this.setState({
            isShow: isShow,
        });
        if (isShow) {
            this.openChangePopupTimer();
            this.props.callbackParent();
        }
    }

    openChangePopupTimer(props) {
        const { interval } = this.props;
        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
            this.setState({
                isShow: false,
            });
        }, interval);
    }

    render() {
        const { content, theme } = this.props;
        const { isShow } = this.state;
        const className = classnames('tip-popup', this.props.className, {
            [`tip-popup-${theme}`]: theme,
            'tip-popup-hidden': !isShow,
        });
        const iconClassName = classnames('icon', {
            [`${theme}-icon`]: theme,
        });
        return (
            <div className={className}>
                <div className={iconClassName} />
                {content}
            </div>
        );
    }
}

TipPopup.defaultProps = {
    isShow: false,
    interval: 3000,
};






@charset 'utf-8';

@import "components/index";

.tip-popup {
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 16px;
    text-align: left;
    z-index: 2;

    &.tip-popup-success {
        width: 150px;
        padding: 6px 15px 6px 40px;
        line-height: 20px;
        color: $primary-color;
        background-color: $light;
        border: 1px solid $gray-lighter;
    }

    &.tip-popup-info {
        display: inline-block;
        max-width: 280px;
        padding: 6px 10px;
        color: #fd8436;
        background-color: $light;
        border: 1px solid $line-color;
    }

    &.tip-popup-warning {
        display: inline-block;
        max-width: 230px;
        padding: 7px 14px 7px 37px;
        color: #fd8436;
        background-color: $light;
        border: 1px solid $gray-lighter;
    }

    &.tip-popup-hidden {
        display: none;
    }

    .icon {
        position: absolute;
    }

    .success-icon {
        top: 10px;
        left: 18px;
        width: 15px;
        height: 11px;
        background: url("./success.png") 0 0 no-repeat;
    }

    .info-icon {
        top: -8px;
        right: 16px;
        width: 15px;
        height: 9px;
        background: url("./tip.png") 0 0 no-repeat;
    }

    .warning-icon {
        top: 7px;
        left: 12px;
        width: 18px;
        height: 16px;
        background: url("./error.png") 0 0 no-repeat;
    }
}