reactjs - 当我加载地图 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>
    );
})}

您甚至可以通过在标记数组上提供标志而不显式检查弹出名称来改进这一点

这是一个简化的演示