`leafletElement` 在 react-leaflet 中变得不确定

Question

当我在我的项目中尝试下面的代码沙箱时 link。我遇到了 leafletElement 变得不确定的问题。

以下是版本：-

"react-leaflet": "^3.1.0", "react-leaflet-enhanced-marker": "^1.0.21",

https://codesandbox.io/s/relaxed-kepler-9sw2n?file=/src/App.js

Answer 1

您的代码需要几处调整：

现在缩放和居中是不可变的，这意味着您无法通过 setState 更改它们。您需要将 mapReference 作为状态变量来实现。
在派生标记引用时不推荐使用 leafletElement
openPopup 不需要任何参数。这来自传单 API 而不是 react-leaflet

您的代码应如下所示：

    this.state = {
         ...
          map: null,
          marker: null
        };

    openPopUp = (marker, id) => {
        console.log(marker);
        if (marker) marker.openPopup();
      };
    
      clickAction = (id, lat, lng) => {
        if (!this.state.map) return;
        this.state.map.setView([lat, lng], 16);
        this.markerRefs[id].openPopup();
      };
    
      render() {
        return (
          <>
            <MapContainer
              center={center}
              zoom={zoom}
              whenCreated={(map) => this.setState({ map })}
            >
           ...
        )
      }
 }

Demo

`leafletElement` 在 react-leaflet 中变得不确定

`leafletElement` is getting undefined in react-leaflet

reactjs

react-leaflet