在用户点击弹出窗口中的按钮后关闭弹出窗口react-leaflet

Question

所以基本上是想自定义关闭react-leaflet弹出组件，接缝与原生API leaflet没有太大问题，但react-leaflet的react组件我找不到解决方案。

Answer 1

目前，我发现关闭弹出窗口的唯一方法是：

constructor(props){
    super(props);
    this.popup = React.createRef();
}

// the magic
closePopusOnClick(){
    this.popup.current.leafletElement.options.leaflet.map.closePopup();
}

render(){
    return <Marker position={[this.props.lat, this.props.lng]}>
        <Popup ref={this.popup}>
            <Button onClick={this.closePopusOnClick}>Close popup</Button>
        </Popup>
    </Marker>;
}

希望它能帮上忙！

Answer 2

在"react-leaflet": "^3.0.2"中，我设法用以下命令关闭了弹出窗口：

popupRef.current._closeButton.click()

与未来的Popup.close()方法相比并不是很好，它必须开箱即用，但可以完成工作……

Answer 3

我最终得到了一个类似于Luca's Answer的解决方案，所以我想我也应该把它作为一个答案。在移动或缩放地图时，我需要关闭所有弹出窗口，结果如下：

import React, { useRef } from "react";
import { Map } from "react-leaflet"

export default () => {
  const mapRef = useRef(null);

  const closePopups = () => {
    mapRef.current.leafletElement.closePopup();
  };

  const handleOnDragend = e => {
    closePopups();
  };

  const handleOnZoomend = e => {
    closePopups();
  };

  if (typeof window === 'undefined') {
    return null;
  }

  return (
      <Map
        ref={mapRef}
        onDragend={handleOnDragend}
        onZoomend={handleOnZoomend}
      >
      </Map>
  )
}

但是，可以对其进行扩展，以便任何东西都可以调用closePopups方法。