React-leaflet在Materialize Modal中无法正常显示的问题求助

核心原因 #

Materialize Modal初始化时处于隐藏状态（display: none），Leaflet无法在隐藏容器中正确计算地图尺寸，导致地图渲染异常；同时代码中MapContainer的ref使用和清理逻辑也需要调整。

解决方案步骤 #

• 监听Materialize Modal的打开完成事件，触发地图尺寸重计算
• 通过whenCreated回调正确获取Leaflet地图实例，替代直接绑定useRef
• 配合Modal的关闭事件，合理处理地图实例的清理

修改后的完整代码 #

import React, { useEffect, useRef } from "react";
import PropTypes from "prop-types";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import M from "materialize-css"; // 确保已安装materialize-css依赖

export const MapModal = ({ lnglat }) => {
    const mapRef = useRef(null);
    const modalRef = useRef(null);

    useEffect(() => {
        // 初始化Materialize Modal实例并绑定事件
        const modalInstance = M.Modal.init(modalRef.current, {
            onOpenEnd: () => {
                // Modal完全打开后，强制地图重新计算尺寸
                mapRef.current?.invalidateSize();
            },
            onCloseEnd: () => {
                // Modal关闭后清理地图实例
                if (mapRef.current) {
                    mapRef.current.remove();
                    mapRef.current = null;
                }
            }
        });

        // 组件卸载时销毁Modal实例
        return () => modalInstance.destroy();
    }, []);

    return (
        <div ref={modalRef} id='MapModal' className='modal'>
            <div className='modal-content'>
                <MapContainer
                    center={[48.0196, 66.9237]}
                    zoom={5}
                    style={{ height: "50vh", width: "100%" }}
                    whenCreated={map => mapRef.current = map}
                >
                    <TileLayer
                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                    />
                    <Marker position={lnglat}>
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </MapContainer>
            </div>
        </div>
    );
};

MapModal.propTypes = {
    lnglat: PropTypes.array.isRequired,
};

额外注意事项 #

• 若项目通过CDN引入Materialize JS，无需导入M，直接使用全局M对象即可
• 地图容器需保持明确的宽高设置（代码中已配置height: 50vh, width: 100%，无需修改）

内容的提问来源于stack exchange，提问作者Dimash Omarbaev