从 MapContainer 外部渲染 Map 子项

如何解决从 MapContainer 外部渲染 Map 子项

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

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

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

有其他可能吗？

解决方法

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

在我的地图容器中，这是发生的：

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 也会点他的技巧......