如何在不渲染的情况下获取React forwardRef组件的ref用于Mapbox Popup

你当前写法存在两个核心问题：

• useRef 是React Hook，只能在组件函数体/自定义Hook内部调用，你声明在App组件外层本身不符合Hook调用规则。
• React 只会在组件实际渲染到DOM容器（包括离屏DOM容器）时，才会给绑定的ref赋值，你只创建了<P ref={pRef}/>这个JSX对象、没有触发渲染流程，pRef.current 自然永远是null。

方案1：离屏渲染组件获取DOM节点（支持组件交互、状态逻辑） #

这个方案会把你的P组件渲染到一个不在页面文档流中的临时容器，拿到真实DOM后传给Mapbox Popup，组件的事件绑定、状态都可以正常运行。

React 17 及更早版本代码示例 #

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import P from './P';
import mapboxgl from 'mapbox-gl';

const App = () => {
  useEffect(() => {
    // 1. 创建离屏空容器
    const popupContainer = document.createElement('div');
    // 2. 声明ref存储组件实例
    const pRef = React.createRef();
    // 3. 将P组件渲染到离屏容器
    ReactDOM.render(<P ref={pRef} />, popupContainer);
    // 4. 传入渲染好的DOM节点
    marker.setPopup(new mapboxgl.Popup().setDOMContent(popupContainer.firstChild));

    // 清理逻辑，避免内存泄漏
    return () => {
      ReactDOM.unmountComponentAtNode(popupContainer);
    };
  }, []);

  // 其他组件逻辑
  return <></>;
};

React 18 版本代码示例 #

import React, { useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import P from './P';
import mapboxgl from 'mapbox-gl';

const App = () => {
  useEffect(() => {
    const popupContainer = document.createElement('div');
    const root = createRoot(popupContainer);
    const pRef = useRef(null);

    root.render(<P ref={pRef} />);
    marker.setPopup(new mapboxgl.Popup().setDOMContent(popupContainer.firstChild));

    return () => {
      root.unmount();
    };
  }, []);

  return <></>;
};

方案2：静态HTML字符串传入（仅适合纯展示内容） #

如果你的P组件没有交互逻辑、只是纯展示，可以用renderToString把组件转为HTML字符串，调用Popup的setHTML方法传入，不需要处理ref：

import { renderToString } from 'react-dom/server';

// useEffect 内部逻辑
const pHTML = renderToString(<P>展示内容</P>);
marker.setPopup(new mapboxgl.Popup().setHTML(pHTML));

注意：该方案只会生成静态HTML，组件的点击事件、React状态都不会生效。

方案3：监听Popup生命周期动态渲染（适合复杂交互场景） #

可以直接监听Popup的open事件，把React组件渲染到Popup自带的容器中，Popup关闭时自动卸载组件：

useEffect(() => {
  const popup = new mapboxgl.Popup();
  marker.setPopup(popup);

  // Popup打开时渲染React组件
  popup.on('open', () => {
    ReactDOM.render(<P />, popup.getContent());
  });

  // Popup关闭时卸载组件，避免内存泄漏
  popup.on('close', () => {
    ReactDOM.unmountComponentAtNode(popup.getContent());
  });
}, []);

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