无法在新的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>

反应传单的v2需要这个。见here。

通过使用withLeaflet（）包装自定义组件，它将获取在其props中注入的Leaflet上下文对象。