React挂载ErrorModal组件是否必须预先在DOM中定义对应容器节点？

是否必须提前预置容器节点？ #

不需要。你当前使用的ReactDOM.render手动挂载组件的方式属于命令式操作，不符合React的声明式开发范式，完全可以通过更简洁的方式实现需求，无需提前硬编码容器节点。

推荐实现方案 #

方案1：状态控制组件渲染（最适合当前场景） #

这是最简单也最推荐的方案，你只需要在Login组件内新增一个状态控制错误提示的展示，想把ErrorModal渲染到什么位置，直接在JSX的对应位置写条件渲染逻辑即可：

import { useState, useRef } from 'react'
import ErrorModal from './ErrorModal'

function Login() {
  const userRef = useRef()
  const passRef = useRef()
  // 用状态管理错误展示状态和错误内容
  const [loginError, setLoginError] = useState(null)

  const handleLogin = async (e) => {
    e.preventDefault()
    try {
      await requestLogin(userRef.current.value, passRef.current.value)
      // 登录成功后的跳转等逻辑写在这里
    } catch (err) {
      // 登录失败时更新状态触发错误组件渲染
      setLoginError(err.message || '登录信息错误，请重试')
    }
  }

  return (
    <form className='login-form' onSubmit={handleLogin}>
        <Field ref={userRef} label='Username:' type='text' />
        <Field ref={passRef} label='Password:' type='password' />
        <div className='button-wrapper'>
          <button type='submit' className='btn'>Login</button>
        </div>
        {/* 想在哪展示错误提示就把这行代码放在对应位置即可 */}
        {loginError && <ErrorModal content={loginError} onClose={() => setLoginError(null)} />}
    </form>
  )
}

export default Login

这种方式不需要任何额外的DOM操作，所有逻辑都在React的生命周期内管理，你可以自由决定ErrorModal的渲染位置，不管是表单内部的提交按钮下方，还是紧邻表单的外部位置，只要调整条件渲染代码的位置即可。

方案2：使用React Portal（适用于需要跨DOM层级渲染的场景） #

如果你的ErrorModal是全屏模态框，需要避免被父元素的overflow、z-index属性限制，可以用React内置的Portal API，动态创建DOM容器，不需要提前在页面中预置任何节点：

import { createPortal, useEffect, useRef, useState } from 'react'
import ErrorModal from './ErrorModal'

// 封装通用动态Portal组件
const DynamicPortal = ({ children, target = document.body }) => {
  const containerRef = useRef(document.createElement('div'))

  useEffect(() => {
    const container = containerRef.current
    target.appendChild(container)
    // 组件卸载时自动销毁动态创建的容器，避免内存泄漏
    return () => {
      target.removeChild(container)
    }
  }, [target])

  return createPortal(children, containerRef.current)
}

// Login组件中使用
function Login() {
  const userRef = useRef()
  const passRef = useRef()
  const [showError, setShowError] = useState(false)

  const handleLogin = async (e) => {
    e.preventDefault()
    try {
      await requestLogin(userRef.current.value, passRef.current.value)
    } catch (err) {
      setShowError(true)
    }
  }

  return (
    <>
      <form className='login-form' onSubmit={handleLogin}>
        <Field ref={userRef} label='Username:' type='text' />
        <Field ref={passRef} label='Password:' type='password' />
        <div className='button-wrapper'>
          <button type='submit' className='btn'>Login</button>
        </div>
      </form>
      {/* 可以自由指定target参数调整渲染位置，默认挂载到body下 */}
      {showError && <DynamicPortal>
        <ErrorModal onClose={() => setShowError(false)} />
      </DynamicPortal>}
    </>
  )
}

export default Login

额外说明 #

你当前使用的ReactDOM.render API在React 18中已经被废弃，如果你使用的是React 18+版本，这种写法会抛出警告，建议尽快迁移到上面的两种方案。

内容的提问来源于stack exchange，提问作者Krullmizter