Доступ к карте из компонента 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)

Но что самое интересное - все работает отлично на "response-leaflet": версия "1.1.0", но на 1.1.1 и выше она ломается.

Есть идеи?

Answer 1

Окей, через некоторое время я нашел решение. Невозможно прочитать свойство 'getSize' неопределенной ошибки, вызванной тем, что карта была передана в ссылки только после загрузки всего модуля. Это можно исправить, добавив:

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>
      )
    }
  }

а затем вводить его в метод рендеринга.

До сих пор не знаю, почему эта проблема не возникала на старых версиях реактивной листовки.