如何让React createPortal渲染在指定元素旁而非容器最后子元素？

默认情况下，createPortal会将组件追加到目标容器的最后一个子元素位置。要将其渲染到特定元素（比如示例中的#next-to-me）旁边，需要结合原生DOM操作手动控制插入位置，具体实现如下：

解决方案代码 #

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

const PortalComponent = () => {
  // 保存portal元素的DOM引用
  const portalRef = useRef(null);

  useEffect(() => {
    const targetEl = document.getElementById('next-to-me');
    const parentContainer = targetEl?.parentElement;

    if (portalRef.current && parentContainer && targetEl) {
      // 将portal插入到目标元素的下一个兄弟节点之前，实现紧跟目标元素的效果
      const nextSibling = targetEl.nextSibling;
      parentContainer.insertBefore(portalRef.current, nextSibling);
    }

    // 组件卸载时清理portal元素，避免DOM残留
    return () => {
      if (portalRef.current?.parentElement) {
        portalRef.current.parentElement.removeChild(portalRef.current);
      }
    };
  }, []);

  return createPortal(
    <div ref={portalRef}>这是渲染在#next-to-me旁边的Portal内容</div>,
    document.getElementById('parent-container')
  );
};

关键逻辑说明 #

1. 元素引用获取：通过useRef拿到portal元素的DOM实例，为后续位置调整提供操作对象。
2. 精准位置插入：在useEffect中定位目标元素#next-to-me及其父容器，利用原生insertBefore方法将portal元素插入到目标元素的下一个兄弟节点之前，从而让portal紧跟在目标元素之后，成为父容器的第二个子元素。
3. 内存泄漏预防：在useEffect的返回函数中移除portal元素，确保组件卸载时清理对应的DOM节点。

如果目标元素是动态生成的（比如由React状态控制渲染），可以将目标元素的ref作为依赖项加入useEffect的依赖数组，确保元素存在时再执行插入操作。

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