亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將代碼移動到函數中時,React-leaflet LayersControl 會拋出錯誤

將代碼移動到函數中時,React-leaflet LayersControl 會拋出錯誤

臨摹微笑 2023-08-18 10:19:06
抱歉,如果之前已經在其他地方回答過這個問題!我是反應傳單的新手,并且在這個問題上掙扎了一段時間。以下代碼無法編譯,并且 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>);}
查看完整描述

1 回答

?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

來自文檔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


查看完整回答
反對 回復 2023-08-18
  • 1 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號