закрыть всплывающее окно с информацией о реакции после нажатия пользователем кнопки во всплывающем окне

Question

Так что, в основном, я хочу сделать пользовательское закрытие для всплывающего компонента реагирующей листовки, швы, которые не являются большой проблемой для нативной листовки API, но для реагирующего компонента из реактивной листовки я не могу найти решение.

Answer 1

В итоге я нашел решение, похожее на Ответ Луки , поэтому я решил добавить его и в качестве ответа. Мне нужно было закрыть все всплывающие окна при перемещении или масштабировании карты, и в итоге получилось следующее:

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 2

на данный момент я нашел единственный способ закрыть всплывающее окно:

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>;
}

Надеюсь, это поможет!