无法在新的ZoomIndicator读取未定义的属性'map‘

Question

我确实按照https://github.com/tumerorkun/react-leaflet-zoom-indicator中的说明安装了插件，但在使用此代码时出现以下错误

import { ReactLeafletZoomIndicator } from 'react-leaflet-zoom-indicator'

<Map
    map={this.refs.mapRef}
    center={[51,10]}
    length={4}
    onClick={(e)=>{this.handleClick(e)}}
    ref="mapRef"
    zoom={5.5}
>
    <ReactLeafletZoomIndicator head='zoom:' position='topleft' />
    <TileLayer
          /*Links for background map*/
    />
          {newLocation}
          {existingLocations}
</Map>

它在这一行失败

    _this.map = context.map || _this.props.leaflet.map;

在来自node_modules的react-leaflet-zoom-indicator.js中

Answer 1

看起来ReactLeafletZoomIndicator没有设置上下文，因此属性映射是未定义的。试试这个：

import { ReactLeafletZoomIndicator } from 'react-leaflet-zoom-indicator'

const ReactLeafletZoomIndicatorWithContext =  = withLeaflet(ReactLeafletZoomIndicator);

<Map
    map={this.refs.mapRef}
    center={[51,10]}
    length={4}
    onClick={(e)=>{this.handleClick(e)}}
    ref="mapRef"
    zoom={5.5}
>
    <ReactLeafletZoomIndicatorWithContext head='zoom:' position='topleft' />
    <TileLayer
          /*Links for background map*/
    />
          {newLocation}
          {existingLocations}
</Map>

react-leaflet的v2要求这样做。参见here。

通过使用withLeaflet()包装您的自定义组件，它将获得注入到其道具中的Leaflet上下文对象。