如何使用 react-leaflet v3 创建类组件？

如何解决如何使用 react-leaflet v3 创建类组件？

React-leaflet 包允许使用传单并使用功能组件进行反应，至少 https://react-leaflet.js.org/ 中的所有示例都使用功能组件。是否可以在 react-leaflet 版本 3 中使用类组件？如果有，有例子吗？

解决方法

支持在react-leaflet v3中创建类组件，尽管与之前版本中官方支持的方式不同。

在版本 v1 和 v2 中，您应该通过以下方式实现自定义组件：

a) 扩展 react-leaflet 提供的抽象类之一，例如：

class MapInfo extends MapControl {
   //...
} 

b) 并实现 createLeafletElement (props: Object): Object 方法

Refer this answer 了解更多详细信息，因为用于为 v1 和 v2 版本实现自定义组件的官方文档不再可用。

---

以下示例演示了如何将自定义组件转换为版本 3。

这是一个兼容 v1/v2 版本的自定义组件：

import React,{ Component } from "react";
import { withLeaflet,MapControl } from "react-leaflet";
import L from "leaflet";

class MapInfo extends MapControl {
  constructor(props,context) {
    super(props);
    props.leaflet.map.addEventListener("mousemove",ev => {
      this.panelDiv.innerHTML = `<h2><span>Lat: ${ev.latlng.lat.toFixed(
        4
      )}</span>&nbsp;<span>Lng: ${ev.latlng.lng.toFixed(4)}</span></h2>`;
      console.log(this.panelDiv.innerHTML);
    });
  }

  createLeafletElement(opts) {
    const MapInfo = L.Control.extend({
      onAdd: map => {
        this.panelDiv = L.DomUtil.create("div","info");
        return this.panelDiv;
      }
    });
    return new MapInfo({ position: "bottomleft" });
  }

  componentDidMount() {
    const { map } = this.props.leaflet;
    this.leafletElement.addTo(map);
  }
}

export default withLeaflet(MapInfo);

可以转换为与版本3兼容的以下类组件：

class MapInfo extends React.Component {
 
  createControl() {
    const MapInfo = L.Control.extend({
      onAdd: (map) => {
        const panelDiv = L.DomUtil.create("div","info");

        map.addEventListener("mousemove",(ev) => {
          panelDiv.innerHTML = `<h2><span>Lat: ${ev.latlng.lat.toFixed(4)}</span>&nbsp;<span>Lng: ${ev.latlng.lng.toFixed(4)}</span></h2>`;
          console.log(panelDiv.innerHTML);
        });
        return panelDiv;
      },});
    return new MapInfo({ position: "bottomleft" });
  }

  componentDidMount() {
    const {map} = this.props;
    const control = this.createControl();
    control.addTo(map);
  }

  render() {
    return null;
  }
}

function withMap(Component) {
  return function WrappedComponent(props) {
    const map = useMap();
    return <Component {...props} map={map} />;
  };
}

export default withMap(MapInfo);

注意： withMap 是一个高阶组件，用于将地图实例传递给类组件

Here is a demo