问题描述
我是 Reactjs 的新手,不过我一直在尝试制作一个包含地图的漂亮桌面平台。为了实现这一点,我使用了 react-map-gl 和 react-pro-sidebar 库。您可以在此处查看库 https://www.npmjs.com/package/react-pro-sidebar https://visgl.github.io/react-map-gl/ 。使用这些库后,我遇到了一个问题,即当侧边栏未折叠时,地图窗口的大小不会调整为我在 MapContainer div 中定义的 100%。正如你在上面的代码中看到的(我只放了一大块代码,因为它很多):
const [viewport,setViewport] = useState({
width: '100%',height: '100%',latitude: 40.634135,longitude: -8.6598916,zoom: 6
});
return (
<MapContainer>
<ReactMapGL
{...viewport}
mapStyle="mapBox://styles/mapBox/light-v10"
onViewportChange={nextViewport => setViewport(nextViewport)}
mapBoxApiAccesstoken={process.env.REACT_APP_MAPBox_TOKEN} >
(...)
</ReactMapGL>
</MapContainer>
const MapContainer = styled.div`
position: relative;
width: 100%;
height: 100%;
`;
const [collapsed,setCollapsed] = useState();
return (
<ProSidebar onMouseLeave={() => setCollapsed(true)} onMouseEnter={() => setCollapsed(false)} collapsed={collapsed}>
<SidebarHeader>
<img src={logo} alt="logo" />
</SidebarHeader>
<SidebarContent>
<Menu iconShape="square">
<MenuItem icon={<RiDashboardLine />}>
Dashboard
<Link to="/dashboard" />
</MenuItem >
<MenuItem icon={<aifillAlert />}>
Alerts
<Link to="/alerts" />
</MenuItem>
<MenuItem icon={<RibroadcastLine />}>
RSUs
<Link to="/rsus" />
</MenuItem>
</Menu>
</SidebarContent>
<SidebarFooter>
</SidebarFooter>
</ProSidebar>
您可以在此处观看结果: enter image description here
希望你能帮我修复这个错误!我试图修复它,但我没有完成:/
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)