React Leaflet：标记组件的自定义事件“onClick”

Question

我想为“react-leaflet”的标记元素定义一个反应组件。例如

import React,{useState} from 'react'
import {Marker,useMapEvent } from 'react-leaflet'
import fireIconSvg from './fire-icon.svg'

import L from "leaflet";

const OSLocationMarker = ( {position, onClick} ) => {

  const locationIcon = new L.Icon({
    iconUrl: fireIconSvg,
    iconRetinaUrl: fireIconSvg,
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(35, 45),
    className: 'location-icon'
});

return (
      <Marker
        data="customdata"
        position={position}
        icon={locationIcon}
        onClick={onClick}
      >
      </Marker>
  );
}

export default OSLocationMarker;

通过这个，我想在单击任何 OSLocationMarker （有 N 个标记）时触发一个函数。OSLocationMarker 获取回调函数作为 prop。这是行不通的。使用 useMapEvent() 传单挂钩我没有让它工作。为什么函数没有被调用？

Answer 1

onClick在react-leaflet v3 中不再起作用。 useMapEvent(s)适用于map实例，而不适用于 UI 组件，例如Marker. 要在 a 上注册事件处理程序Marker，您需要使用eventHandlers以下属性：

<Marker
  data="customdata"
  position={position}
  icon={locationIcon}
  eventHandlers={{ click: onClick }}
>
</Marker>