我正在尝试通过循环JSON file生成Leaflet中的点列表，并使每个点都可单击，以便我可以将活动点置于React状态。

我发现了一个非常好的例子：

https://www.bekk.christmas/post/2020/13/a-hot-chocolate-map-with-react-leaflet-and-typescript用于显示点，但除此之外，我想根据用户单击的点设置一个React状态。

尝试添加onClick属性时：

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>
  ))}

出现以下错误：

键入“{子项：元素;图标：图标〈{图标URL：字符串;图标大小：[编号，编号];}〉;键：数字;位置：[编号，编号];标题：字符串;onClick：（）=〉无效;“}"不能赋给类型”IntrinsicAttributes & MarkerProps & RefAttributes“。
类型“IntrinsicAttributes & MarkerProps & RefAttributes”上不存在属性“onClick”

其他文件是：

import { type HotChocolate } from "../../../leaflet";

export const list: HotChocolate[] = [
  {
    productName: "Varm belgisk sjokolade",
    englishProductName: "Belgian hot chocolate",
    vendor: "Steam kaffebar",
    location: "Jernbanetorget 1, Østbanehallen",
    lat: 59.91088362120013,
    lon: 10.752799203777597,
  },
  ...
];

类型定义为：

export interface HotChocolate {
  productName: string;
  englishProductName: string;
  vendor: string;
  location: string;
  lat: number;
  lon: number;
  description?: string;
  //onClick: () => void;
  //onClick: React.MouseEventHandler<HtmlInputElement>;
}

我想我应该在上面的leaflet.d.ts文件中添加一个onClick类型定义，但是我很难得到正确的类型。对于如何使HotChocolate列表中的不同点可点击，以便根据用户点击的项目设置React状态，有人有什么建议吗？