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

【问题标题】：How to use react-leaflet v3 to create class components?如何使用 react-leaflet v3 创建类组件？
【发布时间】：2020-12-30 22:28:15
【问题描述】：

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

【问题讨论】：

标签： react-leaflet

【解决方案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);

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

Here is a demo

【讨论】：