当我加载地图 React 传单时，是否会初始化一些打开的弹出窗口？

Question

我能够使用以下方法获取地图参考 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'

Answer 1

定义将打开弹出窗口的自定义标记组合

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

当我加载地图 React 传单时，是否会初始化一些打开的弹出窗口？

When I load the map React leaflet will some open popups be initialized?

leaflet

reactjs

react-leaflet

react-leaflet-v3