如何解决当我加载地图 React 传单时,会初始化一些打开的弹出窗口吗?
我能够使用 const map = useRef (null) 但现在我需要在启动地图时打开一些弹出窗口;
const map = useRef (null);
<MapContainer
zoom={15}
center={state.currentLocation}
whenCreated={(mapInstance) => {
map.current = mapInstance;
}}
>{listFarol.map((place) => {
return (
<>
<Marker
key={place.id}
position={place.pos}
icon={myIcon}
>
{place.name=== 'A' ? (
<Popup >{place.name}</Popup >
) : <Popup >{place.name}</Popup >}
</Marker>
</>
);
})}
<LocationMarker position={installActive} /></MapContainer>
但是,如果您想使用此引用来定义应用开始打开时我想要的一系列弹出窗口,在我的情况下,那些满足条件 place.name === 'A'
解决方法
定义一个自定义的标记组合,它将打开弹出窗口
function MarkerWithOpenPopup(props) {
const markerRef = useRef();
useEffect(() => {
if (!markerRef.current) return;
markerRef.current.openPopup();
},[]);
return <Marker ref={markerRef} {...props} />;
}
然后创建一个三元例如来决定在循环期间将使用哪个标记组合:
{markers.map(({ name,id,pos }) => {
const MarkerComp = name === "name 1" ? MarkerWithOpenPopup : Marker;
return (
<MarkerComp position={pos} icon={icon} key={id}>
<Popup>{name}</Popup>
</MarkerComp>
);
})}
您甚至可以通过在标记数组上提供一个标志而不显式检查弹出名称来改进这一点
这是一个简化的 demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。