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

Question

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

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

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

使用： "leaflet": "1.7.1", "react": "16.14.0", "react-dom": "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

来自文档 1 ，文档 2

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

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