在 react-leaflet 中動態渲染彈出窗口時清空幽靈彈出窗口

Question

我通過一系列嵌套標記元素在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時，即使瀏覽器插件沒有顯示彈出窗口，我也會得到一個空的彈出窗口：

嵌套標記組件是否會導致此問題，還是存在其他問題？

Answer 1

嘗試Seth Lutske回答

react-leaflet：在渲染新標記之前清除標記簇

他將標記包裝在 MarkerClusterGroup 中，並在每次需要刷新 map 中的標記時更改密鑰。 也為我工作

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