小编Gad*_*mer的帖子

嘿伙计们，基本上我的网站目前看起来像这样。我的目标是当用户单击右上角的箭头时折叠左侧边栏，单击时将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} …