时间戳

首页 > 解决方案 > 从 MapContainer 外部渲染 Map 子节点

reactjs - 从 MapContainer 外部渲染 Map 子节点

问题描述

我想<MapContainer>从初始外部渲染一个孩子MapContainer。这有可能吗？

在 react-leaflet-v3 中，我通过引用传递地图对象来在地图上渲染很多项目。但是对于我目前的情况，我希望根据路由在地图顶部呈现一个反应按钮。

一种方法是<Route />.在 MapContainer 中添加嵌套。然而，由于分散的路线行为，这并不理想......

有可能以另一种方式吗？

标签： reactjsreact-leafletreact-leaflet-v3

解决方案

我使用门户的方式来解决我的问题：

在我的地图容器中，发生了这种情况：

const [control, setControl] = useState(null);
const handleRef = useCallback((instance) => setControl(instance), [
  setControl,
]);
...


<MapContainer ...>
   ...
   <div className="mapcontrol-top-left" ref={handleRef}></div>
</MapContainer>

在一个完全不同的组件中，有条件地我想在地图上显示一些东西，我这样做（使用 Material-UI Portal & Fab 组件）：

<Portal container={props.control}>
  <Fab size="medium">
    <EditIcon />
  </Fab>
</Portal>

material-ui Portal 组件易于使用并增加了便利性，但原生的 React Portal 也能做到这一点......

推荐阅读