Next.js 13中如何向已渲染DOM动态添加元素且不替换子元素？

直接使用ReactDOM.createPortal就能解决你的问题，这是React官方提供的跨DOM层级渲染方案，既能把自定义组件渲染到指定DOM元素内，又完全保留该元素原有的子元素，不需要额外嵌套容器。

实现代码示例 #

1. 基础用法（Client Component）

如果是在Next.js 13的App Router中，记得先加上'use client'指令（因为涉及DOM操作和ReactDOM API，必须在客户端组件中执行）：

'use client';

import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import ForgotPassword from '@/components/ForgotPassword'; // 替换成你的组件路径

export default function PortalMountWrapper() {
  const portalRootRef = useRef(null);

  useEffect(() => {
    // 获取目标DOM元素
    const targetElement = document.getElementById('your-target-dom-id');
    if (targetElement && !portalRootRef.current) {
      // 创建Portal根节点，渲染组件到目标元素内（作为新增子元素）
      portalRootRef.current = ReactDOM.createRoot(targetElement);
      portalRootRef.current.render(<ForgotPassword />);
    }

    // 组件卸载时清理Portal，避免内存泄漏
    return () => {
      portalRootRef.current?.unmount();
      portalRootRef.current = null;
    };
  }, []);

  return null; // 该组件无需渲染自身DOM结构
}

2. 关键说明

• createPortal会将你的ForgotPassword组件作为目标DOM元素的新增子元素插入，不会覆盖原有内容，完全符合你的需求。
• 用useRef保存Portal根节点引用，避免重复创建；清理函数确保页面卸载时正确销毁Portal实例。
• 如果目标DOM元素是动态加载的（比如异步渲染的内容），可以调整useEffect的依赖项，或者结合MutationObserver监听DOM变化，确保元素存在后再执行渲染逻辑。

注意事项 #

• 所有涉及document操作、ReactDOM API的代码必须放在Client Component中（App Router下加'use client'，Pages Router下无需额外处理），不能在Server Component中执行。
• 确保目标DOM元素的ID唯一，避免挂载到错误元素上。

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