在 react-leaflet 中动态渲染弹出窗口时清空幽灵弹出窗口答案

【问题标题】：Empty ghost Popup when dynamically rendering popup in react-leaflet在 react-leaflet 中动态渲染弹出窗口时清空幽灵弹出窗口
【发布时间】：2020-12-04 22:12:47
【问题描述】：

我通过一系列嵌套标记元素在react-leaflet 中动态呈现标记弹出窗口：DonutMarker、BoundsDriftMarker 和DriftMarker。 Popup 在 DonutMarker (GitHub) 中创建并作为道具传递给 BoundsDriftMarker：

export default function DonutMarker(props: DonutMarkerProps) {
  ...
  return (
    <BoundsDriftMarker
      ...
      popup={
        <Popup>
          ...
          test
        </Popup>
      }
      showPopup={props.showPopup}
    />
  );
}

然后从BoundsDriftMarker (GitHub) 动态呈现为DriftMarker：

export default function BoundsDriftMarker({position, bounds, icon, duration, popup, showPopup}: BoundsDriftMarkerProps) {
  ...
  return (<DriftMarker
    ...
  >
    ...
    {showPopup && popup}
  </DriftMarker>)
}

这是当前showPopup == true 时的样子，以及 React 浏览器插件在标记下正确显示 Popup 元素：

但是，当我在此之后切换 showPopup == false 时，即使浏览器插件没有显示弹出窗口，我也会得到一个空的弹出窗口：

是嵌套的标记组件导致了这个问题，还是有其他问题？

【问题讨论】：

标签： javascript reactjs typescript leaflet react-leaflet

【解决方案1】：

尝试Seth Lutske回答

react-leaflet: Clear marker cluster before rendering new markers

他将标记包装在 MarkerClusterGroup 中，并在每次需要刷新地图中的标记时更改密钥。也适合我

  <MarkerClusterGroup
    key={uuidv4()}  
    spiderfyDistanceMultiplier={1}
    showCoverageOnHover={true}
>

【讨论】：