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

Question

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

以下代码无法编译，并且 chrome 开发人员工具告诉我：此页面上有 3 个错误：
1）“TypeError：addOverlay 不是函数”，
2）“TypeError：addOverlay 不是函数”和“，
3）”类型错误：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

来自文档1、文档2Map：顶级组件，实例化 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. addOverlay内部this.addLayer正在通过 props 进行解构。此时 props 很可能不包含 addOverlay 方法，因此无法检索，因此会发生错误。结果，您无法LayersControl.Overlay按照您想要的方式使用。没有这样的例子，我认为这是不可能的，因为地图实例没有按应有的方式提供LayersControl.Overlay