Question

是否有避免在Popup组件上使用autoClose属性的方法？我想要这样的东西，但是react-leaflet中不存在autoClose属性。

<Marker position={coords}>
  <Popup autoClose={false}>
    Some text
  </Popup>
</Marker>

Answer 1

实际上，一些Leaflet Popup options没有通过Popup库中的react-leaflet组件props公开。

可以考虑使用以下解决方案来分配这些属性：

引入一个callback function以通过popup.leafletElement访问Leaflet Popup：

<Popup ref={popupEl => this.assignPopupProperties(popupEl)}>
        Melbourne
</Popup>

，然后直接更新 Leaflet Popup options：

assignPopupProperties(popup) {
   popup.leafletElement.options.autoClose = false;
   popup.leafletElement.options.closeOnClick = false;
}

这里是demo和source code

Answer 2

我找到了方法。您必须同时设置属性autoClose和closePopupOnClick：

<Map center={position} zoom="12" closePopupOnClick={false}>
  <Marker position={coords}>
    <Popup autoClose={false}>
      I'm a popup
    </Popup>
  </Marker>
</Map>

如何避免Popup组件中的autoClose？

2 个答案: