将代码移动到函数中时，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、文档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. addOverlay内部this.addLayer正在通过 props 进行解构。此时 props 很可能不包含 addOverlay 方法，因此无法检索，因此会发生错误。

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