Javascript 如何在数据集上处理react传单v3中的事件？

我一直在使用react传单v3来绘制给定半径内的医院地图。我有一个从端点检索该信息的组件，即以下代码中的医院组件：

从“React”导入React；
从“react传单”导入{MapContainer，TileLayer}；
从“/Hospitals”导入医院；
导出默认类MyMap扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
id:0，
lat:-23.550519，
液化天然气：-46.633309，
缩放：12
};
}
render（）{
const position=[this.state.lat，this.state.lng]；
返回(
);
}
}

所以，这很有魅力！

检索数据集并在地图上显示标记，每个标记对应于上述数据集中的医院

现在，我想在每一个标记上应用事件来显示每一个标记的信息，即每个医院可用的ICU的名称、地址和数量

如何在MapContainer中的数据集上应用事件？关于这一点，本文并不是详尽无遗，我在尝试匹配到目前为止我在谷歌搜索的几个例子时遇到了错误

我发现了这一点，但当我尝试应用相同的逻辑时，我发现错误如下：

不能在类组件中调用React挂钩“useMap”。反应钩 必须在React函数组件或自定义React挂钩中调用 作用

我已经创建了一个组件来处理地图上的事件。然后我将该组件连接到MapContainer。显然，它不起作用，因为它在数据集上不起作用

编辑：添加医院的组件代码

从“React”导入React；
从“react传单”导入{GeoJSON}；
const立交桥=要求（“查询立交桥”）；
导出默认类组件{
建造师（道具）{
超级（道具）；
此.state={
geojson:未定义，
地图：未定义，
setMap：未定义
};
}
render（）{
返回this.state.geojson？：null；
}
componentDidMount（）{
const query=`[out:json]；（way[healthcare~“^（hospital | clinic）$”）（大约：50000，-23.550519，-46.633309）\
关系[healthcare~“^（hospital | clinic）$”]（约：50000，-23.550519，-46.633309）\
外中心；>；外骨骼qt；`；
常量选项={
flatProperties：正确
};
立交桥（查询、this.dataHandler、选项）；
}
dataHandler=（错误，osmData）=>{
如果（！error&&osmData.features！==未定义）{
this.setState（{geojson:osmData}）；
}
};
}

---

此组件使用查询立交桥库来检索OpenStreetMaps中可用的信息。在这个特殊的情况下，Geijson格式的医疗中心的信息。

< P> >一个选项是通过方法绑定弹出到标记点击。就

react-palicate

库而言，

GeoJSON

组件公开

onEachFeature

事件，该事件在每个功能上被调用，并且可以初始化弹出窗口

下面是一个经过修改的

组件

，它演示了如何将弹出窗口绑定到标记单击：

class Hospitals extends React.Component {
  handleEachFeature(feature, layer) {    
    const popupContent = feature.properties.hospitalDesc; //it is assumed  GeoJSON feature contains hospitalDesc property
    layer.bindPopup(popupContent);
  }

  render() {
    return (
      <GeoJSON data={hostpitalData} onEachFeature={this.handleEachFeature} />
    );
  }
}

class.Component{
HandleEach特征（特征，层）{
const popupContent=feature.properties.hospitalDesc；//假定GeoJSON功能包含hospitalDesc属性
layer.bindPopup（弹出内容）；
}
render（）{
返回(
);
}
}

---

仅供参考

谢谢，现在我知道我必须将事件附加到GeoJSON对象