SOURCE

class WarningToast extends React.Component {
    constructor (props) {
        super(props)
    }

    render () {
        const show = this.props.show
        if (!show) {
            return null
        }
        return (
            <div className="warning">
                Warining!!!!!
            </div>
        )
    }
}

class Page extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            show: false
        }
    }

    handleClick = () => {
        this.setState(state => ({
            show: !state.show
        }))
    }

    render () {
        const show = this.state.show
        return (
            <div>
                <WarningToast show={show}/>
                <button onClick={this.handleClick}>{show ? '隐藏' : '显示'}警告</button>
            </div>
        )
    }
}

ReactDOM.render(
    <Page/>,
    document.getElementById('app')
)

<div id="app"></div>

.warning {
    color: red;
    transition: all 0ms cubic-bezier(0.075, 0.82, 0.165, 1);
}