Блог

Извините, если на это был дан ответ где-то еще раньше! Я новичок в react-leaflet и уже некоторое время борюсь с этой проблемой.

Следующий код не компилируется, и инструменты разработчика Chrome сообщают мне: 3 ошибки на этой странице:
1) «TypeError: addOverlay не является функцией»,
2) «TypeError: addOverlay не является функцией» и «,
3) «TypeError: 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='amp;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>);
}
 

Из documentation1, documentation2

Map: компонент верхнего уровня, создающий экземпляр карты листовки и предоставляющий ее своим дочерним элементам.

Все компоненты являются оболочками React для элементов и слоев листовки, им нужен экземпляр map и, следовательно, они должны быть включены в компонент верхнего уровня.

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 не содержат метода addOverlay и, следовательно, не могут быть извлечены, поэтому возникает ошибка.

В результате вы не можете использовать LayersControl.Overlay то, что пытаетесь. Такого примера нет, и я думаю, что это невозможно, поскольку экземпляр map предоставлен не так, как должен LayersControl.Overlay