从MapLayer组件访问地图(工作在以前的反应-传单版本)

Question

我现正尝试在单张地图上展示两点之间的路线。为此目的，我正在使用传单路由机。但是，在将地图对象传递给传单路线组件时，我有问题。

map_container.js

...
        return (
            <Map ref='map' center={position} zoom={this.state.zoom}>
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Routing map={this.refs.map} from={[51.599684, 15.27539]} to={[51.602292, 15.295128]} />
            </Map>
        )
...

routing.js

import {MapLayer} from 'react-leaflet';
import L from 'leaflet';
import 'leaflet-routing-machine';

export default class RoutingMachine extends MapLayer {
    componentWillMount() {
        super.componentWillMount();
        this.leafletElement.addTo(this.props.map);
    }

    render() {
        return null;
    }

    createLeafletElement (props) {
        const {from, to} = this.props;
        console.log(this.props)
        var leafletElement = L.Routing.control({
            waypoints: [
                L.latLng(from[0], from[1]),
                L.latLng(to[0], to[1]),
            ],
        });
        return leafletElement;
    }
}

我发现的错误：

{map: undefined, from: Array(2), to: Array(2)}

bundle.js:69506 Uncaught TypeError: Cannot read property 'getSize' of undefined
    at NewClass.onAdd (bundle.js:69506)
    at NewClass.onAdd (bundle.js:68679)
    at NewClass.addTo (bundle.js:26718)

但是最有趣的是--所有的东西在“react传单”："1.1.0“版本上都能很好地工作，但是在1.1.1及以上版本上就会中断.

有什么想法吗？

Answer 1

好吧，过了一会儿我找到了解决办法。无法读取未定义错误的属性“getSize”，这是因为只有在加载完整个模块之后，才会将映射传递给refs。可以通过添加以下内容来修正：

return ( this.map ? 
        <Map onClick={(e) => this._mapClickEvent(e)} className="main-screen-map-container" center={position} 
             zoom={this.state.zoom} ref={map => this.map = map}> 

          <TileLayer 
              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" 
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
          /> 
          <Routing map={this._getMap()} from={[11.11, 12.12]} to={[11.11, 12.12]}
                   by={this.props.busstops}/>  
        </Map> 
        : 
        <Map onClick={(e) => this._mapClickEvent(e)} className="main-screen-map-container" center={position} 
             zoom={this.state.zoom} ref={map => this.map = map}> 

          <TileLayer 
              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" 
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
          /> 
        </Map> 

它检查地图是否已经定义，然后在地图上重新划分道路。根据代码的其余部分(如果您使用Redux获取某些数据并设置强制更新的状态)，可能还需要添加以下代码：

 componentDidMount() { 
    console.log("map did mount " + this.map); 
    this.forceUpdate() 
  } 

这应该能解决问题。PS三元操作符也可以通过删除冗余代码和仅仅添加

 _addRouting() {
    if (this.map) {
      return (
          <div>
            <Routing map={this._getMap()} from={[11.11, 12.12]} to={[11.11, 12.12]}
                     by={this.props.busstops}/>
          </div>
      )
    }
  }

然后在渲染方法中注入。

仍然不知道为什么这个问题没有发生在较早版本的反应传单。