从 MapContainer 外部渲染地图 child

Question

我想在初始 MapContainer 之外渲染 <MapContainer> 内部的 child。这有可能吗？

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

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

是否可以换一种方式？

Answer 1

我用传送门的方式解决了我的问题：

在我的地图容器中，发生了这样的事情：

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 也可以解决问题...

从 MapContainer 外部渲染地图 child

Render Map child from outside MapContainer

reactjs

react-leaflet

react-leaflet-v3