老师，多次点击报错ReactDOM.createRoot重复绑定，请问怎么解决呢

Question

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>
        </>
    )
}

Answer 1

西门老舅 2023-05-29 10:29:23

你好，只需要判断一下，只触发一次就可以解决

const message = {

    success(text) {

        if(!this.container) {

          this.container = ReactDOM.createRoot(document.querySelector("#message"))

          this.container.render(<Message text={text} icon="√" />)

        }

    }

}

• 提问者 Panda_io #1

  老师您这方法有点矫枉过正了，也就是后面的点击就不会走任何逻辑，我想要的是每一次点击都能弹出提示，但是不会报错的方法，辛苦老师再指点下。

• 西门老舅 回复 提问者 Panda_io #2

  可以这样试一下
  function Message({ icon, text }) {
      const nodeRef = useRef(null)
      const [prop, setProp] = useState(true)
      const handleEntered = () => {
          setTimeout(() => {
              setProp(false)
          },2000)
      }
      const handleExited = () => {
          message.list = []
      }
      return (
          <CSSTransition in={prop} timeout={1000} classNames="Message" 
          nodeRef={nodeRef} appear onEntered={handleEntered} onExited={handleExited} unmountOnExit>
              <div className="Message" ref={nodeRef}>{icon} {text}</div>
          </CSSTransition>
  
      )
  }
  
  const message = {
    list: [],
    success(text) {
      if(this.container){
        this.container.unmount() 
      }
      this.container = ReactDOM.createRoot(document.querySelector("#message"))
      this.list.push(<Message key={this.list.length} text={text} icon="√" />)
      this.container.render(this.list)
    }
  }
  export default function App() {
      const handleClick = () => {
          message.success('登录成功')
      }
      return (
          <>
              <button onClick={handleClick}>点击</button>
          </>
      )
  }

• 提问者 Panda_io 回复 西门老舅 #3

  谢谢老师unmount为我提供了新思路，本以为一般不去unmount，现在才理解可以灵活unmount，万分感谢