MapLayerコンポーネントからマップにアクセスする（以前の反応チラシのバージョンで動作します）

Question

リーフレットマップ上の2点間のルートを表示しようとしています。その目的のために私はリーフレットルーティングマシンを使用しています。しかし、リーフレットルートコンポーネントにマップオブジェクトを渡すことに問題があります。

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

Okey、しばらくして解決策を見つけました。 未定義のプロパティ '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> 

マップがすでに定義されているかどうかを確認してから、それを道路上に再表示します。

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

それを修正する必要がありますあなたのコードの残りの部分に応じて、（あなたがReduxのを使用して、いくつかのデータをフェッチして更新を強制的に状態を設定している場合）、また、次のコードを追加する必要があります。 PSの3進演算子は、冗長コードを削除し、単に

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

を追加してレンダリングメソッドで注入することでリファクタリングすることもできます。

以前のバージョンの反応チラシでこの問題が発生しなかった理由はまだ分かりません。