react-map-gl侧边栏宽度变化时无法自动适配缩放问题求助

你的代码里有两个核心问题导致resize()不生效：

• 错误获取地图实例：mapRef.current是react-map-gl的组件实例，不是底层mapbox-gl的Map对象，直接调用.resize()没用。
• 调用时机过早：侧边栏折叠后DOM尺寸还没更新完成就调用resize，地图计算不到新的容器尺寸。

修正后的代码 #

import React, { useEffect, useRef } from "react";
import Map from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import "../../styles/map/MapComponent.css";

const TOKEN = "map-token";

function MapComponent({ smallMapSidebar }) {
  const mapRef = useRef(null);
  const mapboxMap = useRef(null);

  // 地图加载完成后保存底层mapbox实例
  const onMapLoad = (mapInstance) => {
    mapboxMap.current = mapInstance;
  };

  useEffect(() => {
    // 等DOM重绘完成再调用resize，确保容器尺寸已更新
    const timer = setTimeout(() => {
      mapboxMap.current?.resize();
    }, 80);

    return () => clearTimeout(timer);
  }, [smallMapSidebar]);

  return (
    <div className="map-container">
      <Map
        ref={mapRef}
        mapboxAccessToken={TOKEN}
        initialViewState={{
          longitude: -0.118092,
          latitude: 51.509865,
          zoom: 10,
        }}
        style={{ width: "100%", height: "100%" }}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        onLoad={onMapLoad}
      />
    </div>
  );
}

export default MapComponent;

关键改动说明 #

1. 新增mapboxMap ref，通过onLoad回调获取底层mapbox-gl的Map实例，这是调用原生API的正确方式。
2. 在useEffect里加入短延迟，确保侧边栏折叠后地图容器的尺寸已经更新，resize才能正确计算新的可视区域。
3. 移除了冗余的resizeMap变量和onClick/onResize里无效的resize调用，避免不必要的干扰。

另外要确认.map-container的CSS没有固定宽度，确保容器能随侧边栏折叠自动扩展宽度，比如：

.map-container {
  width: 100%;
  height: 100vh;
  /* 避免其他固定宽度样式 */
}

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