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

Question

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

Answer 1

在 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);

Note: withMap is a high order component which is intended to pass map instance into class component

Here is a demo