当侧边栏宽度改变时，react-map-gl 不会调整大小

Question

嘿伙计们，基本上我的网站目前看起来像这样。我的目标是当用户单击右上角的箭头时折叠左侧边栏，单击时将smallMapSidebar状态变为true。

但是，当侧边栏的宽度发生变化时，地图不会覆盖新空间，看起来像这样

这是我的地图组件的当前代码。

import React, { useState, useEffect, useRef } from "react";
// map imports
import Map from "react-map-gl";
import MapboxGl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
// styling imports
import "../../styles/map/MapComponent.css";
// added the following 6 lines.
import mapboxgl from "mapbox-gl";

const TOKEN = "map-token";

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

  const resizeMap = MapboxGl.Map.prototype;

  useEffect(() => {
    // console.log(resizeMap);
    if (smallMapSidebar === true) {
      mapRef.current.resize();
      // console.log(mapRef.current);
    }
  }, [smallMapSidebar, resizeMap]);

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

export default MapComponent;

我尝试通过使用 useRef 到达地图组件来模拟调整大小函数，但这不起作用。

有没有办法在smallMapSidebar状态变为true时触发.resize函数。

感谢您的时间

Answer 1

我有同样的问题。通过插件的功能搜索和尝试不同的方法，我没有取得任何进展，但我以一种我知道不是最佳解决方案的方式解决了问题。

众所周知，状态会导致组件重新渲染。我定义了一个状态，每次侧边栏折叠时都会更新该状态，并最终导致地图组件重新渲染。这使得地图的大小正确。

这是我的初始化状态：

const [reRenderMap, setReRenderMap] = useState(1)

每次我的侧边栏折叠或展开时，我都会将时间戳值设置为我的状态：

setReRenderMap(Date.now())

最后，通过使用这个状态作为地图主要组件的键，它可以在每次折叠时重新渲染：

<Map
   key={reRenderMap} // The state called here
   initialViewState={{
      // ...
   }}
   mapStyle="mapbox://..."
   mapboxAccessToken='
>