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- "완벽하게 작동 하는가 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> 

지도가 이미 정의되어 있는지 확인한 다음 도로로 다시 내립니다. 그것을 수정해야

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

을 추가 한 다음 렌더링 메소드에 삽입하여 리팩터링 할 수 있습니다.

이전 버전의 반응 전단지에서 왜이 문제가 발생하지 않았는지 아직 알 수 없습니다.