html - ReactJs 中使用 ReactMapGL 的无响应页面布局

Question

我的页面中有一个 ReactMapGL 组件，它存储在页脚上方和导航栏下方。在我桌面的初始屏幕中，布局看起来不错，但是当我检查元素以缩小屏幕尺寸时，布局变得无响应。

到目前为止，这是我在这个特定页面上的代码：

export default function Map({posts}) {
    const [viewport, setViewport] = useState({
        latitude: 45.4211,
        longitude: -75.6938,
        width:"100vw",
        height:"100vh",
        zoom: 10,
    });

    const [selectedProperty, setSelectedProperty] = useState(null)

    return (
      <div>
        <ReactMapGL {...viewport} mapboxApiAccessToken="//mykey"
        mapStyle="mapbox://styles/jay/cks5xkaa892cp17o5hyxcuu0z"
        onViewportChange={viewport => {
            setViewport(viewport);
        }}>
        {
          posts &&
          posts.map((maps) => (
            <Marker key={maps.id} latitude={maps.Latitude} longitude={maps.Longitude}>
                <button className="marker-btn" onClick={e => {
                    e.preventDefault();
                    setSelectedProperty(maps);
                }}>
                    <img src="placeholder.svg"/>
                </button>
            </Marker>
          ))}

          {selectedProperty ? (
              <Popup latitude={selectedProperty.Latitude} longitude={selectedProperty.Longitude} 
              onClose={() => {setSelectedProperty(null);}}>
                <h1>{selectedProperty.Title}</h1>
              </Popup>) : null}
        </ReactMapGL> 
      </div>
    );
}

对于导航栏和页脚，我从这里复制粘贴了 html 和 css 。

标签： htmlcssreactjs