解决 react-leaflet 中动态修改 Popup 弹窗内容后尺寸不变的问题

2023-08-12

0评论

阅读

爱搜啊

问题描述：

在使用 react-leaflet 中的 leaflet 组件时，发现在动态修改 Popup 弹窗内容后，Popup 的尺寸并未随之变化。

解决方法：

经过分析，发现这个问题是由于 react-leaflet 并没有处理 Popup 的 className、minWidth 等属性的更新所导致的。为了解决这个问题，有以下几种方法可供选择：

方法0：使用修改后的 react-leaflet 包

可以使用经过修复的 react-leaflet 包来解决这个问题。将 package.json 中的依赖修改成如下所示：

"dependencies": { "react-leaflet": "npm:@azimiao/react-leaflet" }

然后重新安装依赖即可。这个修复后的包会监听 minWidth 和 maxWidth 属性的变化，并更新 leaflet 中的 options 值，从而使 Popup 的尺寸能够正确地变化。

方法1：修改 react-leaflet 源码

通过修改 react-leaflet 源码中的 Popup.tsx 文件，可以使其监听 minWidth 和 maxWidth 属性的变化，并更新 leaflet 中的 options 值，从而解决这个问题。具体的修改代码如下：

function usePopupLifecycle(
        element: LeafletElement<LeafletPopup>,
        context: LeafletContextInterface,
        { position, minWidth, maxWidth, maxHeight },
        setOpen: SetOpenFunc,
    ) {
        // 其他代码略...
    
        const firstUpdate = useRef(true)
        useLayoutEffect(() => {
          if (firstUpdate.current) {
            firstUpdate.current = false
            return
          }
          const { instance } = element
          if (minWidth != null) {
            instance.options.minWidth = minWidth
          }
          if (maxWidth != null) {
            instance.options.maxWidth = maxWidth
          }
          if (maxHeight != null) {
            instance.options.maxHeight = maxHeight
          }
          instance.update()
        }, [element, minWidth, maxWidth, maxHeight])
    }

通过这种修改，可以使 react-leaflet 在 minWidth 和 maxWidth 属性发生变化时更新 leaflet 的 options 值，并重新计算 Popup 的尺寸。