为Leaflet Marker添加onClick属性并更新React状态的类型问题

问题描述 #

遍历JSON数据在React-Leaflet中生成标记点，希望点击标记点时将对应数据项存入React状态。为Marker组件添加onClick属性后出现TypeScript错误：

Type '{ children: Element; icon: Icon<{ iconUrl: string; iconSize: [number, number]; }>; key: number; position: [number, number]; title: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & MarkerProps & RefAttributes'.
Property 'onClick' does not exist on type 'IntrinsicAttributes & MarkerProps & RefAttributes'

用户误以为需要在HotChocolate类型定义中添加onClick字段，但实际方向错误。

相关代码片段：

错误的Marker组件代码 #

import { Popup, Marker } from "react-leaflet";
import { list } from "./HotChocolate";
...

{list.map((item, index) => (
  <Marker
    icon={icon2}
    key={index}
    position={[item.lat, item.lon]}
    title={`${item.englishProductName} at ${item.vendor}`}
    onClick={() => {
      console.log(item);
      console.log("do something more");
    }}
  >
    <Popup>
      <strong>
        {item.englishProductName} at {item.vendor}
      </strong>
    </Popup>
  </Marker>
))}

HotChocolate类型定义（leaflet.d.ts） #

export interface HotChocolate {
  productName: string;
  englishProductName: string;
  vendor: string;
  location: string;
  lat: number;
  lon: number;
  description?: string;
}

解决方案 #

核心要点 #

不需要修改HotChocolate接口，React-Leaflet的Marker组件不支持直接传递onClick属性，需通过**eventHandlers属性**绑定Leaflet原生事件。

完整实现代码 #

1. 先在组件中定义存储选中项的React状态：

import { useState } from 'react';
import { Popup, Marker, Map, TileLayer } from "react-leaflet";
import { list } from "./HotChocolate";
import { HotChocolate } from '../../../leaflet';

export default function HotChocolateMap() {
  // 初始化选中项状态为null
  const [selectedItem, setSelectedItem] = useState<HotChocolate | null>(null);

  return (
    <div>
      {/* 展示选中项信息 */}
      {selectedItem && (
        <div style={{ padding: '10px' }}>
          <h3>选中的热巧克力店：</h3>
          <p>{selectedItem.englishProductName} - {selectedItem.vendor}</p>
        </div>
      )}
      
      {/* Leaflet地图容器 */}
      <Map center={[59.9108836, 10.7527992]} zoom={13} style={{ height: '600px', width: '100%' }}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        />
        {list.map((item, index) => (
          <Marker
            icon={icon2}
            key={index}
            position={[item.lat, item.lon]}
            title={`${item.englishProductName} at ${item.vendor}`}
            // 使用eventHandlers绑定点击事件
            eventHandlers={{
              click: () => {
                console.log('选中项:', item);
                // 更新React状态
                setSelectedItem(item);
              }
            }}
          >
            <Popup>
              <strong>
                {item.englishProductName} at {item.vendor}
              </strong>
            </Popup>
          </Marker>
        ))}
      </Map>
    </div>
  );
}

关键说明 #

• eventHandlers是React-Leaflet组件的标准属性，用于绑定Leaflet原生事件，支持click、mouseover等Marker原生事件。
• 事件处理函数可直接访问当前遍历的item，调用setSelectedItem即可完成状态更新。
• 若需获取Leaflet原生事件对象（如点击坐标），可在处理函数中接收参数：

eventHandlers={{
  click: (event) => {
    console.log('点击坐标:', event.latlng);
    setSelectedItem(item);
  }
}}

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