从 MapContainer 外部渲染地图 child
Render Map child from outside MapContainer
我想在初始 MapContainer
之外渲染 <MapContainer>
内部的 child。这有可能吗?
在 react-leaflet-v3 中,我通过引用传递地图 object 在地图上渲染了很多项目。但是对于我目前的情况,我想根据路线在地图顶部呈现一个反应按钮。
一种方法是在 MapContainer 中添加 nest <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 也可以解决问题...