从MapContainer外部渲染贴图子对象

Question

我想从初始MapContainer外部在<MapContainer>内部呈现一个子对象。这是不是有可能呢？

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

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

有没有可能用另一种方式？

Answer 1

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

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

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也会使它变得更复杂……