diff --git a/src/DivOverlay.js b/src/DivOverlay.js index f869aff6..64d57e51 100644 --- a/src/DivOverlay.js +++ b/src/DivOverlay.js @@ -1,7 +1,6 @@ // @flow -import React, { Fragment } from 'react' -import { render, unmountComponentAtNode } from 'react-dom' +import { createPortal } from 'react-dom' import MapComponent from './MapComponent' import updateClassName from './utils/updateClassName' @@ -41,19 +40,19 @@ export default class DivOverlay< this.updateLeafletElement(prevProps, this.props) if (this.leafletElement.isOpen()) { - this.renderContent() + this.leafletElement.update() + this.onRender() } } onClose = () => { - this.removeContent() if (this.props.onClose) { this.props.onClose() } } onOpen = () => { - this.renderContent() + this.forceUpdate() // Re-render now that leafletElement is created if (this.props.onOpen) { this.props.onOpen() } @@ -61,28 +60,10 @@ export default class DivOverlay< onRender() {} - renderContent = () => { - if (this.props.children == null) { - this.removeContent() - } else { - render( - {this.props.children}, - this.leafletElement._contentNode, - () => { - this.leafletElement.update() - this.onRender() - }, - ) - } - } - - removeContent = () => { + render() { if (this.leafletElement._contentNode) { - unmountComponentAtNode(this.leafletElement._contentNode) + return createPortal(this.props.children, this.leafletElement._contentNode) } - } - - render() { return null } } diff --git a/src/Popup.js b/src/Popup.js index 3be6acdb..a4c5c60c 100644 --- a/src/Popup.js +++ b/src/Popup.js @@ -61,7 +61,6 @@ class Popup extends DivOverlay { } componentWillUnmount() { - this.removeContent() const { map } = this.props.leaflet if (map != null) { diff --git a/src/Tooltip.js b/src/Tooltip.js index 6eb3ee55..0e84c9d0 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -33,8 +33,6 @@ class Tooltip extends DivOverlay { } componentWillUnmount() { - this.removeContent() - const { popupContainer } = this.props.leaflet if (popupContainer == null) return