Question

为避免编写庞大的组件，我希望包装Leaflet Map组件，并希望通过门户从代码的不同部分注入子代。

我的应用是基于地图的，因此根据路线的不同，它可以显示热图，标记，形状等。

我的地图包装器很简单

<LeafletMap {...props}>
    <TileLayer url={tilesSource} />
    <div id={mapPortalId} />
</LeafletMap>

我的门户网站组件已经包含withLeaflet

const MapPortalRaw = ({ children, id }: IProps) => {
    const containerRef = useRef<HTMLElement | null>(null);

    const getContainer = () => {
        if (!containerRef.current) {
            containerRef.current = document.createElement('div');
            containerRef.current.setAttribute(
                'data-testid',
                `map-portal-${id}`,
            );
        }

        return containerRef.current;
    };

    const modalRoot = getPortalSource();

    useEffect(() => {
        if (!modalRoot) {
            return;
        }
        modalRoot.appendChild(getContainer());

        return () => {
            modalRoot.removeChild(getContainer());
        };
    }, [modalRoot]);

    return createPortal(children, getContainer());
};

export const MapPortal = compose<IProps, IProps>(withLeaflet)(MapPortalRaw);

<MapPortal id="asd">
    <HeatmapLayer
        points={addressPoints}
        longitudeExtractor={(m: any) => m[1]}
        latitudeExtractor={(m: any) => m[0]}
        intensityExtractor={(m: any) => parseFloat(m[2])}
     />
</MapPortal>

不幸的是，由于HeatmapLayer似乎无法从Leaflet Map访问上下文，因此它不起作用。直接将其作为儿童放置会很好。

如何在React-leaflet中使用门户？

0 个答案: