Question

因此，基本上想对react-leaflet Popup组件进行自定义关闭，这种接缝与本机API传单无关，但与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

我最终得到了与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方法。

Answer 3

在"react-leaflet": "^3.0.2"中，我设法通过以下方式关闭弹出窗口：

popupRef.current._closeButton.click()

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

用户单击弹出窗口中的按钮后，关闭弹出式反应叶

3 个答案: