react-leaflet自定义Marker图标组件onClick事件失效求助

问题核心：用ReactDOMServer.renderToString生成的是静态HTML字符串，React的事件绑定不会生效，必须让组件以React实例的方式挂载到DOM中。

步骤1：实现自定义Leaflet Icon类 #

创建继承自L.DivIcon的类，在图标创建时挂载React组件，移除时卸载组件避免内存泄漏：

import L from 'leaflet';
import ReactDOM from 'react-dom';
import IconGen from './IconGen';

class ReactDivIcon extends L.DivIcon {
  createIcon(oldIcon) {
    const icon = super.createIcon(oldIcon);
    const { incomingData } = this.options;
    
    ReactDOM.render(
      <IconGen incomingData={incomingData} />,
      icon
    );
    
    return icon;
  }

  removeIcon(icon) {
    ReactDOM.unmountComponentAtNode(icon);
    super.removeIcon(icon);
  }
}

步骤2：修正自定义组件的语法与逻辑问题 #

原组件存在语法错误和不合理的state更新逻辑，修正后版本：

import { useState, useEffect } from 'react';

const IconGen = ({ incomingData }) => {
  const [dataMap, setDataMap] = useState({
    1: { list: [], angle: 0, sId: '' },
    2: { list: [], angle: 0, sId: '' },
    3: { list: [], angle: 0, sId: '' }
  });

  useEffect(() => {
    const dataMapTemp = { ...dataMap };
    incomingData.BandData.forEach((each) => {
      dataMapTemp[each.AntennaX].list.push(each);
      dataMapTemp[each.AntennaX].angle = each.angle;
      dataMapTemp[each.AntennaX].sId = each.SID;
    });
    setDataMap(dataMapTemp);
  }, [incomingData]);

  const generateSvg = (each) => {
    // 补充你的generateSvg具体实现
    return <span key={each.SID}>{each.Band}</span>;
  };

  return (
    <div className="container_Sector">
      <div className="circle" style={{ backgroundColor: "#c31605" }}></div>
      <div
        id={dataMap[1]?.sId}
        style={{ rotate: `${dataMap[1]?.angle}deg` }}
        onClick={() => alert("You clicked the sector!")}
      >
        {dataMap[1]?.list.map(generateSvg)}
      </div>
      <div style={{ rotate: `${dataMap[2]?.angle}deg` }}>
        {dataMap[2]?.list.map(generateSvg)}
      </div>
      <div style={{ rotate: `${dataMap[3]?.angle}deg` }}>
        {dataMap[3]?.list.map(generateSvg)}
      </div>
    </div>
  );
};

export default IconGen;

注：用useEffect处理数据初始化，避免每次渲染重复执行；提前初始化dataMap的默认结构，防止数组/属性不存在时报错。

步骤3：父组件中使用自定义Icon #

在Marker的icon属性中实例化自定义Icon并传递props：

import { MapContainer, Marker } from 'react-leaflet';
import ReactDivIcon from './ReactDivIcon';

const MapComponent = ({ dataList }) => {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: "100vh" }}>
      {dataList.map(data => (
        <Marker
          key={data.SiteID}
          position={[data.Latitude, data.Longitude]}
          icon={new ReactDivIcon({
            className: "custom-icon",
            incomingData: data
          })}
        />
      ))}
    </MapContainer>
  );
};

export default MapComponent;

原理说明 #

• 自定义ReactDivIcon重写createIcon方法，在Leaflet创建图标DOM后，用ReactDOM.render挂载React组件，确保事件绑定正常生效。
• 重写removeIcon方法卸载组件，避免内存泄漏。
• 组件所需props通过Icon的options传递，保证每个Marker的图标能拿到对应数据。

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