Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.

import ReactDOM from 'react-dom/client'
import './message.scss'
import { CSSTransition } from 'react-transition-group'
import { useRef, useState} from 'react'

function Message({ icon, text }) {
    const nodeRef = useRef(null)
    const [prop, setProp] = useState(true)
    const handleEntered = () => {
        setTimeout(() => {
            setProp(false)
        },2000)
    }
    return (
        <CSSTransition in={prop} timeout={1000} classNames="Message" 
        nodeRef={nodeRef} appear onEntered={handleEntered} unmountOnExit>
            <div className="Message" ref={nodeRef}>{icon} {text}</div>
        </CSSTransition>

    )
}

const message = {
    success(text) {
        const message = ReactDOM.createRoot(document.querySelector("#message"))
        message.render(<Message text={text} icon="√" />)
    }
}
export default function App() {
    const handleClick = () => {
        message.success('登录成功')
    }
    return (
        <>
            <button onClick={handleClick}>点击</button>
        </>
    )
}