如何填补React DOM缺口 解决Next.js地图插入组件无法访问Context问题

你通过ReactDOM.render单独渲染的组件会生成一个完全独立的React根节点，和你项目原有的主React组件树没有层级关联，外层SomeContext.Provider的上下文无法传递到这个独立根里，所以组件只能读到Context的默认值。
另外你原有代码里的组件变量名是小写开头，直接作为组件渲染会被React识别为原生HTML标签，需要先改成大写开头的变量名。

Portal是React原生提供的能力，作用是把组件渲染到任意指定的DOM节点中，但组件仍然属于原有父组件树的层级，可以正常继承所有上层的Context，也能和主树共享生命周期，避免内存泄漏。
示例代码：

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

function TheMap() {
  const mapContainerRef = useRef(null)
  // 存储需要插入到地图内的自定义组件和对应的DOM容器
  const [customMapNodes, setCustomMapNodes] = useState([])

  useEffect(() => {
    // 你的地图初始化逻辑，拿到地图实例
    const mapInstance = 你的地图初始化方法(mapContainerRef.current)

    // 示例：插入自定义弹窗
    const popupDom = document.createElement('div')
    // 把DOM容器传给地图API挂载
    mapInstance.addPopup(popupDom /* 其他地图API要求的参数 */)
    // 把容器和要渲染的组件存入state
    setCustomMapNodes(prev => [...prev, {
      id: 'popup-1',
      dom: popupDom,
      component: <你要插入的自定义组件 />
    }])

    return () => {
      // 地图销毁逻辑自行补充
    }
  }, [])

  return (
    <div ref={mapContainerRef}>
      {/* 渲染所有Portal，组件会被插入到对应dom容器中，同时继承上层所有Context */}
      {customMapNodes.map(item => 
        createPortal(item.component, item.dom, item.id)
      )}
    </div>
  )
}

如果你不想调整现有逻辑，可以在渲染组件时手动套一层Context的Provider，把当前拿到的Context值传进去，适合Context值不常更新的场景。
示例代码：

import { useContext } from 'react'
import SomeContext from '你的Context定义文件路径'

function 你调用mkElementWithComponent的组件() {
  // 先拿到当前层级的Context值
  const contextValue = useContext(SomeContext)

  function mkElementWithComponent(Component) {
    const elm = document.createElement("div");
    // 手动套Provider透传Context值
    ReactDOM.render(
      <SomeContext.Provider value={contextValue}>
        <Component />
      </SomeContext.Provider>,
      elm
    );
    return elm;
  }

  // 你的其他业务逻辑
}

该方案的缺点是如果有多个Context需要逐层嵌套Provider，且Context值更新时，独立渲染的组件不会自动同步更新，需要自行监听变化重新渲染。

React 18已经废弃了ReactDOM.render方法，独立渲染组件需要改用createRoot：

import { createRoot } from 'react-dom/client'

const elm = document.createElement('div')
const root = createRoot(elm)
root.render(<组件 />)

内容的提问来源于stack exchange，提问作者Míla Mrvík