如何获取React根外元素的Ref？实现全屏地图上层渲染MUI组件

React Portal并不要求目标元素必须是React组件的Ref，只要能拿到对应的DOM元素，就能将MUI组件渲染到上面。以下分两种场景给出解决方案：

一、静态提前定义的div（index.html中已存在） #

如果目标div是提前写在index.html的body里的，比如：

<!-- index.html -->
<body>
  <div id="root"></div>
  <div id="map-overlay" style="position: absolute; z-index: 100000; width: 100px; height: 100px; top: 0; left: 0;"></div>
</body>

直接通过document.getElementById获取该DOM元素，传入React Portal即可渲染MUI组件：

import React from 'react';
import { createPortal } from 'react-dom';
import { Button, ThemeProvider, createTheme } from '@mui/material';

// 初始化MUI主题，确保样式正常生效
const theme = createTheme();

const MapOverlayComponent = () => {
  // 获取目标DOM元素
  const targetElement = document.getElementById('map-overlay');

  // 元素不存在时返回null避免报错
  if (!targetElement) return null;

  return createPortal(
    // 用ThemeProvider包裹MUI组件，确保样式全局生效
    <ThemeProvider theme={theme}>
      <Button variant="contained" sx={{ width: '100%', height: '100%' }}>
        全屏地图上方的MUI按钮
      </Button>
    </ThemeProvider>,
    targetElement
  );
};

export default MapOverlayComponent;

二、动态创建的div（地图初始化时生成） #

如果目标div是地图初始化过程中动态创建的，可在组件的useEffect中监听地图初始化完成事件，获取或创建该DOM元素，存入组件状态后传给Portal：

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { Button, ThemeProvider, createTheme } from '@mui/material';
// 导入你的地图库，比如高德、百度或Leaflet等
import YourMapLibrary from 'your-map-library';

const theme = createTheme();

const FullscreenMapWithPortal = () => {
  const [overlayElement, setOverlayElement] = useState(null);

  useEffect(() => {
    // 初始化全屏地图
    const mapContainer = document.createElement('div');
    mapContainer.style.cssText = 'position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;';
    document.body.appendChild(mapContainer);
    const map = new YourMapLibrary.Map(mapContainer);

    // 创建地图上方的叠加层div
    const overlayDiv = document.createElement('div');
    overlayDiv.style.cssText = `
      position: absolute;
      z-index: 100000;
      width: 100px;
      height: 100px;
      top: 0;
      left: 0;
    `;
    document.body.appendChild(overlayDiv);
    setOverlayElement(overlayDiv);

    // 组件卸载时清理资源
    return () => {
      map.destroy();
      document.body.removeChild(mapContainer);
      if (overlayDiv) document.body.removeChild(overlayDiv);
    };
  }, []);

  if (!overlayElement) return null;

  return createPortal(
    <ThemeProvider theme={theme}>
      <Button variant="outlined" sx={{ width: '100%', height: '100%' }}>
        动态创建的叠加层上的MUI按钮
      </Button>
    </ThemeProvider>,
    overlayElement
  );
};

export default FullscreenMapWithPortal;

关键注意点 #

• 无需为根外的div创建React Ref，直接操作DOM元素即可传给createPortal
• 必须用ThemeProvider包裹Portal内的MUI组件，确保MUI的样式能正确作用到根外的元素
• 组件卸载时记得清理动态创建的DOM元素，避免内存泄漏

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