reactjs - 用箭头问题反应传单折线

Question

我正在使用反应传单。我尝试用带箭头的折线来实现它。

它显示以下错误。

1.TypeError：无法读取 tncomponentDidMount 处未定义的属性“addLayer”（MapLayer.js:40） 2.TypeError：无法读取 a.value 处未定义的属性“leafletElement”（Polyline.js:8） 3.TypeError：无法读取tncomponentWillUnmount (MapLayer.js:61) 处未定义的属性“removeLayer”

在这里我也添加了我的 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 && 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>
  )
  }
 }

折线.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 <Polyline positions={ [coordinates] } arrowheads /> />

如果你们有任何想法，请告诉我

标签： reactjsleaflet