如何在React中结合非React库（如maplibregl）用React事件替代原生DOM事件？

我正在开发一个需要整合React事件的项目，但在使用MapLibre GL这类不原生支持React的库时遇到了问题——不得不添加原生HTML元素（比如为标记添加自定义HTML图标）。以下是我当前的实现方式：

function renderS1Template(r, siteName){
        var template = `
        <div id="${r}" class='map-icon-holder' >
            <img  class='map-icon' src=${S1Icon} />
            <div class='map-icon-label' >
                <label >${siteName}</label>
            </div>
            
        </div>`
        
        return $(template)[0]
    }

        let template = renderS1Template(r, siteName)

            // create the marker with custom html component
            const marker1 = new maplibregl.Marker( template , {
                draggable: true,
                'nodeName' : nodeName
            })
            // .setLngLat([ coordinates.lng, coordinates.lat])
            .setLngLat([data.x, data.y])
            .setPopup(new maplibregl.Popup({ offset: 25 }))
            .addTo(props.callback.mapObject)

完成上述操作后，我不得不依赖.on('contextmenu')等原生事件来处理交互。想了解是否有技术或方法，能让我在处理这些原生DOM元素时使用React事件，替代原生事件监听器。

解决方案 #

1. 使用React createPortal挂载React组件到Marker元素 #

React的createPortal可以将组件渲染到React根节点之外的DOM元素中，刚好适配MapLibre GL Marker的自定义DOM场景。这样你就能在组件内部直接使用React的事件系统（比如onContextMenu、onClick）。

示例代码：

import { createPortal } from 'react';

// 定义React版的Marker图标组件
const MapMarkerIcon = ({ siteName, onContextMenu }) => {
  return (
    <div className='map-icon-holder' onContextMenu={onContextMenu}>
      <img className='map-icon' src={S1Icon} />
      <div className='map-icon-label'>
        <label>{siteName}</label>
      </div>
    </div>
  );
};

// 创建带React事件的Marker
const createReactMarker = (siteName, lngLat, map, onMarkerContextMenu) => {
  // 创建空DOM容器用于挂载React组件
  const markerContainer = document.createElement('div');
  
  // 初始化MapLibre Marker
  const marker = new maplibregl.Marker(markerContainer, { draggable: true })
    .setLngLat(lngLat)
    .setPopup(new maplibregl.Popup({ offset: 25 }))
    .addTo(map);

  // 通过Portal挂载React组件到Marker容器
  createPortal(
    <MapMarkerIcon 
      siteName={siteName} 
      onContextMenu={(e) => {
        e.preventDefault(); // 阻止默认右键菜单
        onMarkerContextMenu(lngLat);
      }} 
    />,
    markerContainer
  );

  return marker;
};

// 调用示例
createReactMarker('测试站点', [data.x, data.y], props.callback.mapObject, (lngLat) => {
  console.log('右键点击Marker', lngLat);
});

2. 封装自定义React Marker组件 #

把MapLibre Marker的创建、生命周期管理和React事件绑定逻辑封装成可复用的React组件，通过props传递事件回调，完全贴合React开发模式。

示例代码：

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

const ReactMapMarker = ({ siteName, lngLat, map, onContextMenu, onClick }) => {
  const markerRef = useRef(null);
  const containerRef = useRef(document.createElement('div'));

  useEffect(() => {
    if (!map) return;

    // 创建并挂载Marker
    const marker = new maplibregl.Marker(containerRef.current, { draggable: true })
      .setLngLat(lngLat)
      .setPopup(new maplibregl.Popup({ offset: 25 }))
      .addTo(map);

    markerRef.current = marker;

    // 组件卸载时清理Marker
    return () => marker.remove();
  }, [map, lngLat]);

  // 通过Portal渲染带React事件的图标
  return createPortal(
    <div 
      className='map-icon-holder' 
      onContextMenu={(e) => {
        e.preventDefault();
        onContextMenu?.(lngLat);
      }}
      onClick={() => onClick?.(lngLat)}
    >
      <img className='map-icon' src={S1Icon} />
      <div className='map-icon-label'>
        <label>{siteName}</label>
      </div>
    </div>,
    containerRef.current
  );
};

// 使用示例
<ReactMapMarker 
  siteName='测试站点'
  lngLat={[data.x, data.y]}
  map={props.callback.mapObject}
  onContextMenu={(lngLat) => console.log('右键触发', lngLat)}
  onClick={(lngLat) => console.log('点击触发', lngLat)}
/>

3. 利用React事件委托（简化方案） #

如果不想引入createPortal，可以在React根组件或地图容器上监听全局事件，通过判断事件目标是否属于Marker元素来处理交互。这种方式无需修改原有Marker的DOM创建逻辑，只需给Marker元素添加标识数据。

示例代码：

// 在地图容器组件中添加全局事件监听
useEffect(() => {
  const handleContextMenu = (e) => {
    // 匹配Marker容器元素
    const markerHolder = e.target.closest('.map-icon-holder');
    if (markerHolder) {
      e.preventDefault();
      // 从dataset获取预先存储的经纬度
      const lngLat = JSON.parse(markerHolder.dataset.lnglat);
      console.log('右键点击Marker', lngLat);
    }
  };

  document.addEventListener('contextmenu', handleContextMenu);
  return () => document.removeEventListener('contextmenu', handleContextMenu);
}, []);

// 修改原有模板渲染函数，添加经纬度数据
function renderS1Template(r, siteName, lngLat){
  var template = `
  <div id="${r}" class='map-icon-holder' data-lnglat='${JSON.stringify(lngLat)}' >
      <img  class='map-icon' src=${S1Icon} />
      <div class='map-icon-label' >
          <label >${siteName}</label>
      </div>
      
  </div>`
  
  return $(template)[0]
}

// 创建Marker时传入经纬度
let template = renderS1Template(r, siteName, [data.x, data.y])

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