将代码移动到函数中时，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”， “反应域”：“16.14.0”， "react-leaflet": "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：顶级组件实例化 Leaflet 地图并提供它 给它的孩子。

所有组件都是 Leaflet 元素和层的 React 包装器， 他们需要一个地图实例，因此必须包含在顶层 组件。

LayersControl.Overlay 使用 Overlay 类(doc)，在 Overlay 类里面有如下代码：

 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 内部正在通过道具进行解构。很可能此时道具不包含 addOverlay 方法，因此无法检索，因此会发生错误。

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