React-leaflet LayersControl 在将代码移动到函数中时抛出错误

Question

抱歉，如果之前在其他地方已经回答过这个问题！我是 react-leaflet 的新手，现在已经为这个问题苦苦挣扎了一段时间。

以下代码无法编译，chrome 开发人员工具告诉我：此页面上有 3 个错误：
1)“TypeError：addOverlay 不是函数”，
2) "TypeError: addOverlay 不是函数" 和 ",
3) "TypeError: this.props.removeLayer 不是函数".

我不明白的是：如果我注释掉“TestOverlay”组件，它会编译。将代码放入函数中似乎发生了一些神奇的事情，但我不知道问题出在哪里..

使用： “传单”：“1.7.1”， “反应”：“16.14.0”， “反应-dom”：“16.14.0”， “反应传单”：“2.7.0”，

非常感谢您的帮助！

import React from "react";
import { Map, TileLayer, LayersControl, Marker, LayerGroup } from "react-leaflet";

import "./App.css";

function TestOverlay() {
  return <LayersControl.Overlay checked name="Random layer 2">
  <Marker position={[52.339545, 4.900526]} />
</LayersControl.Overlay>;

}

export default function App() {
  return (
    <Map center={[52.339545, 4.900526]} zoom={14}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <LayersControl position="topright">
        <LayersControl.Overlay checked name="Random layer">
          <Marker position={[52.339545, 4.900526]} />
        </LayersControl.Overlay>
        <TestOverlay/>
      </LayersControl>
    </Map>);
}

Answer 1

来自documentation1, documentation2

Map: top-level component instantiating a Leaflet map and providing it to its children.

All components are React wrappers for Leaflet elements and layers, they need a map instance and therefore must be included in a top-level component.

LayersControl.Overlay 使用 Overlay class( doc) 并且在 Overlay class 里面有下面的代码：

 class Overlay extends ControlledLayer {
  constructor(props: ControlledLayerProps) {
    super(props)
    this.contextValue = {
      ...props.leaflet,
      layerContainer: {
        addLayer: this.addLayer.bind(this),
        removeLayer: this.removeLayer.bind(this),
      },
    }
  }

  addLayer = (layer: Layer) => {
    this.layer = layer // Keep layer reference to handle dynamic changes of props
    const { addOverlay, checked, name } = this.props
    addOverlay(layer, name, checked)
  }
}

在构造函数addLayer中分配了一个方法this.addLayer。 this.addLayer 内的 addOverlay 正在通过 props 进行解构。很可能此时道具不包含 addOverlay 方法，因此无法检索，因此发生错误。

因此，您无法按照您尝试的方式使用 LayersControl.Overlay。没有这样的例子，我认为这是不可能的，因为地图实例没有按照应有的方式提供给 LayersControl.Overlay

React-leaflet LayersControl 在将代码移动到函数中时抛出错误

React-leaflet LayersControl throws error when moving code into function

javascript

leaflet

reactjs

react-leaflet