将Next.js代码转为React.js：首次使用createPortal，容器节点放置位置咨询

架构老林

2026-7-11

在React项目中配置createPortal的容器节点

方法一：直接修改根HTML文件（和Next.js方式最接近）

如果你用的是Create React App或Vite创建的React项目，找到项目根目录下的public/index.html，在<div id="root"></div>同级位置添加你的容器：

<body>
  <div id="root"></div>
  <!-- Portal目标容器 -->
  <div id="photo-picker"></div>
</body>

之后在组件里使用createPortal时，直接获取这个节点即可：

import { createPortal } from 'react-dom';

function PhotoPicker() {
  const portalRoot = document.getElementById('photo-picker');
  if (!portalRoot) return null;

  return createPortal(
    <div className="photo-picker-content">
      {/* 你的图片选择器内容 */}
    </div>,
    portalRoot
  );
}

方法二：在React组件内动态创建容器（无需修改HTML）

如果不想手动修改HTML文件，可以在组件挂载时动态创建并插入容器到DOM中：

import { useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';

function PhotoPicker() {
  const portalContainerRef = useRef(null);

  useEffect(() => {
    // 创建容器元素
    const container = document.createElement('div');
    container.id = 'photo-picker';
    // 将容器插入到body末尾
    document.body.appendChild(container);
    portalContainerRef.current = container;

    // 组件卸载时清理容器，避免内存泄漏
    return () => {
      document.body.removeChild(container);
    };
  }, []);

  if (!portalContainerRef.current) return null;

  return createPortal(
    <div className="photo-picker-content">
      {/* 你的图片选择器内容 */}
    </div>,
    portalContainerRef.current
  );
}