react-leaflet Popup组件onClose事件不触发问题求助

react-leaflet的<Popup>组件确实没有直接暴露onClose这类回调，你得通过Leaflet原生的Popup实例来监听关闭事件，具体实现步骤如下：

1. 用useRef创建一个引用，用来获取Popup的原生实例
2. 在useEffect里给这个实例绑定popupclose事件，触发时重置展开状态
3. 组件卸载时记得移除事件监听，避免内存泄漏

修改后的代码示例：

import { useState, useRef, useEffect } from 'react';
import { Marker, Popup } from 'react-leaflet';

// ... 其他业务代码

const [isExpanded, setIsExpanded] = useState(false);
const popupRef = useRef(null);

useEffect(() => {
  const popupInstance = popupRef.current?.leafletElement;
  if (!popupInstance) return;

  const handleClose = () => {
    setIsExpanded(false);
  };

  popupInstance.on('popupclose', handleClose);

  // 清理函数：防止组件重复渲染时绑定多个事件
  return () => {
    popupInstance.off('popupclose', handleClose);
  };
}, []);

// ... 渲染部分
<Marker
  key={market.id}
  position={[market.geometry.y, market.geometry.x]}
>
  <Popup ref={popupRef}>
    <PopupData
      market={market}
      isExpanded={isExpanded}
      onToggleExpand={() => setIsExpanded(!isExpanded)}
    />
  </Popup>
</Marker>

原理说明：

• popupRef.current.leafletElement可以获取到Leaflet原生的Popup对象
• Leaflet原生Popup支持popupclose事件，弹窗关闭时会自动触发
• 通过useEffect绑定事件，确保只有当Popup实例存在时才添加监听，同时用清理函数移除监听，避免内存泄漏和重复绑定问题

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