如何在反应传单中打开弹出窗口？答案

【问题标题】：How to open popup in react-leaflet?如何在反应传单中打开弹出窗口？
【发布时间】：2021-07-16 02:32:07
【问题描述】：

我正在开发一个包含多个标记的 react-leaflet 地图。我的目的是让弹出窗口一个一个地打开。

所以，我的标记是通过映射一个数组并返回组件来呈现的

arr.map((item, i) => <CustomMarker isActive={isActive} data={item} key={i} />)

isActive 是一个表示弹出窗口应该处于活动状态的值。

<CustomMarker /> 看起来像这样：

const CustomMarker = ({isActive, data}) => {
  return (
    <Marker position={data.position}>
      <Popup>
        <a href={data.url}>Go to this website</a>
      </Popup>
    </Marker>
  )
}

我尝试了几件事，但没有一个对我有用。

通过eventHandlers实现
使用L.divIcon() 创建自定义图标并使用自定义弹出窗口编写 HTML。但是，弹出窗口无法点击，因为它是标记图标的一部分。

如何使用isActive值打开弹窗？

【问题讨论】：

标签： javascript leaflet react-leaflet

【解决方案1】：

您可以通过获取 react-leaflet Popup 组件的引用来做到这一点，一旦该引用准备好，使用它调用 L.popup 的 openOn 方法。

首先，您需要一个可以传递给每个 CustomMarker 的地图参考：

const Map = (props) => {
  const [map, setMap] = useState();

  return (
    <MapContainer
      whenCreated={setMap}
      {...otherProps}
    >
      <CustomMarker
        map={map}
        data={{
          position: [20.27, -157]
        }}
      />
      <CustomMarker
        map={map}
        data={{
          position: [20.27, -156]
        }}
        isActive
      />
    </MapContainer>
  );
};

如您所见，每个 CustomMarker 都将地图引用作为道具。然后在 CustomMarker 中，您需要获取 Popup 组件的引用。请注意，安装时将不提供 ref。您需要等待 ref 可用。但是因为 useEffect 不会在 ref 更改值时导致重新渲染，所以您可以通过在 ref 回调中设置状态变量来让组件知道 ref 已准备好：

const CustomMarker = ({ isActive, data, map }) => {
  const [refReady, setRefReady] = useState(false);
  let popupRef = useRef();

  useEffect(() => {
    if (refReady && isActive) {
      popupRef.openOn(map);
    }
  }, [isActive, refReady, map]);

  return (
    <Marker position={data.position}>
      <Popup
        ref={(r) => {
          popupRef = r;
          setRefReady(true);
        }}
      >
        Yupperz
      </Popup>
    </Marker>
  );
};

ref 仅在组件安装后可用。在 ref 属性中，首先我们将 ref 设置为 useRef 值，然后将状态变量 refReady 更改为 true。当这个值改变时，useEffect 触发。 if 语句确保 ref 确实存在。如果 ref 已准备好，并且 isActive 为真，我们调用 L.popup.openOn(map)，并且您的弹出窗口在挂载时打开。

Working codesandbox

或者，如果您不想打扰所有这些，这些功能（以及更多！）内置于 react-leaflet-editable-popup。

【讨论】：