React Leaflet隐藏默认关闭按钮后通过自定义按钮关闭Popup的问题

问题原因 #

你遇到的报错是因为当前使用的是 react-leaflet v3 及以上版本，该版本移除了旧版本中ref返回对象下的leafletElement字段，popupElRef.current本身就直接对应Leaflet的原生Popup实例，不需要额外嵌套一层访问。

解决方案 #

直接调用原生Popup实例自带的close()方法即可实现关闭，修改你的hideElement函数逻辑即可：

const hideElement = () => {
  // 加可选链避免ref未初始化时调用抛出异常
  popupElRef.current?.close()
}

该方案不受closeButton={false}配置的影响，不需要依赖默认的关闭按钮实例，完全适配自定义关闭按钮的需求。

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