React와 Leaflet을 결합하는 좋은 방법

Question

나는 React와 Leaflet을 결합하는 프로젝트를 진행하고 있는데, 나는 의미론에 어려움을 겪고 있다고 말해야 만한다.

물건의 대부분은 리플릿에 의해 직접 관리되므로, 리팩토 맵 인스턴스를 리액션 구성 요소의 상태로 추가하는 것이 합리적인지 알 수 없습니다.

전단지로 마커를 만들 때와 같은 문제는 아무것도 반환하지 않기 때문에 실제로 렌더링 할 항목이 없습니다. 논리 자체는 나에게 모호하게 보인다.

내가 시작한 것은 다음과 같습니다. 작동하지만 나쁜 코드를 작성하고 개념을 이해하지 못하는 것 같습니다.

/** @jsx React.DOM */ 

/* DOING ALL THE REQUIRE */ 
var Utils = require('../core/utils.js'); 

var Livemap = React.createClass({ 
    uid: function() { 
     var uid = 0; 
     return function(){ 
      return uid++; 
     }; 
    }, 
    getInitialState: function() { 
     return { 
      uid: this.uid() 
     } 
    }, 
    componentDidMount: function() { 
     var map = L.map('map-' + this.state.uid, { 
      minZoom: 2, 
      maxZoom: 20, 
      layers: [L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'})], 
      attributionControl: false, 
     }); 
     map.fitWorld(); 
     return this.setState({ 
      map: map 
     }); 
    }, 
    render: function() { 
     return (
      <div className='map' id={'map-'+this.state.uid}></div> 
     ); 
    } 
}); 

(function(){ 
    Utils.documentReady(function(){ 
     React.render(
      <Livemap />, 
      document.body 
     ) 
    }); 
})(); 

그래서 제 질문은 다음과 같습니다

• 이 샘플은 합법적 보이는가?
• 마커를 추가하고 이벤트를 관리하는 논리에 어떻게 접근합니까?

Answer 1

• 당신은, 즉 "UID"자신을 고유성을 관리 할 필요가 없습니다. 대신 getDOMNode을 사용하여 구성 요소의 실제 노드에 액세스 할 수 있습니다. 전단의 API는 문자열 선택기 또는 HTMLElement 인스턴스를 지원합니다.
• 리플릿이 렌더링을 관리하므로 map은 state에 살면 안됩니다. React의 DOM 요소 렌더링에 영향을주는 데이터는 state에만 저장하십시오.

두 점을 제외하고 일반적으로 리플릿 API를 사용하고 React 구성 요소의 콜백을 원하는대로 리갈 맵에 연결합니다. React는이 시점에서 래퍼 일뿐입니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Livemap extends React.Component { 

    componentDidMount() { 
     var map = this.map = L.map(ReactDOM.findDOMNode(this), { 
      minZoom: 2, 
      maxZoom: 20, 
      layers: [ 
       L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
        {attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}) 
      ], 
      attributionControl: false, 
     }); 

     map.on('click', this.onMapClick); 
     map.fitWorld(); 
    } 

    componentWillUnmount() { 
     this.map.off('click', this.onMapClick); 
     this.map = null; 
    } 

    onMapClick =() => { 
     // Do some wonderful map things... 
    } 

    render() { 
     return (
      <div className='map'></div> 
     ); 
    } 

} 

Answer 2

PaulLeCam의 반응 전단지 구성 요소가 인기가있는 것으로 보입니다. 아직 사용하지만 약속 같은데하지 않은 :

이

https://github.com/PaulLeCam/react-leaflet

UPDATE :을 그것은 고체입니다. 아직 많은 기능을 사용하지는 않았지만 코드베이스는 잘 작성되어 있으며 따라하기 쉽고 확장 할 수 있으며, 사용했던 기능을 그대로 사용할 수 있습니다.