Блог

Я использую листовку react. Я пытаюсь реализовать это с помощью полилинии со стрелкой.

отображается следующая ошибка.

1.Ошибка типа: не удается прочитать свойство ‘addLayer’ неопределенного значения при t.n.componentDidMount (MapLayer.js: 40) 2.Ошибка типа: не удается прочитать свойство ‘leafletElement’ неопределенного значения при.value (Polyline.js:8) 3.Ошибка типа: не удается прочитать свойство ‘removeLayer’ неопределенного значения при t.n.componentWillUnmount (MapLayer.js: 61)

здесь я добавляю свой Maplayer.js и Polyline.js также

MapLayer.js

 import type { Layer } from 'leaflet'
import React, { Fragment } from 'react'

import { LeafletProvider } from './context'
import MapComponent from './MapComponent'
import type { LeafletContext, MapLayerProps } from './types'

export default class MapLayer<LeafletElement: Layer,Props: MapLayerProps,>     
extends MapComponent<LeafletElement, Props> {
  contextValue: ?LeafletContext
   leafletElement: LeafletElement

 constructor(props: Props) {
 super(props)
 this.leafletElement = this.createLeafletElement(props)
}


get layerContainer(): Layer {
return this.props.leaflet.layerContainer || this.props.leaflet.map
 }

createLeafletElement(_props: Props): LeafletElement {
 throw new Error('createLeafletElement() must be implemented')
}

updateLeafletElement(_fromProps: Props, _toProps: Props) {}

componentDidMount() {
super.componentDidMount()
this.layerContainer.addLayer(this.leafletElement)
}

componentDidUpdate(prevProps: Props) {
super.componentDidUpdate(prevProps)

if (this.props.attribution !== prevProps.attribution) {
  const { map } = this.props.leaflet
  if (map != null amp;amp; map.attributionControl != null) {
    map.attributionControl.removeAttribution(prevProps.attribution)
    map.attributionControl.addAttribution(this.props.attribution)
  }
}

this.updateLeafletElement(prevProps, this.props)
}

componentWillUnmount() {
super.componentWillUnmount()
this.layerContainer.removeLayer(this.leafletElement)
}

 render() {
  const { children } = this.props
  if (children == null) {
   return null
 }
  return this.contextValue == null ? (
  <Fragment>{children}</Fragment>
   ) : (
  <LeafletProvider value={this.contextValue}>{children}</LeafletProvider>
  )
  }
 }
  

Polyline.js

 import React from 'react'
import { Polyline } from 'react-leaflet'
import 'leaflet-arrowheads'

class ArrowheadsPolyline extends React. Component{

 componentDidMount(){
  const polyline = this.polylineRef.leafletElement
  if (this.props.arrowheads){
     polyline.arrowheads(this.props.arrowheads)
     polyline._update()
  }
 }
 componentWillUnmount(){
  if (this.props.arrowheads){
     const polyline = this.polylineRef.leafletElement
     polyline.deleteArrowheads()
  }
  }
  render(){
  return(
     <Polyline {...this.props} ref={polylineRef => this.polylineRef = polylineRef} />
  )
  }

}


export default ArrowheadsPolyline
  

и мой компонент map похож

 <Map <Polyline positions={ [coordinates] } arrowheads /> />
  

Если у вас, ребята, есть какие-либо идеи, пожалуйста, дайте мне знать