React와 전단지를 결합하는 좋은 방법

React와 전단지를 결합하는 좋은 방법

React와 Leaflet을 결합하는 프로젝트를 진행 중인데, 의미론적으로 조금 어려움을 겪고 있습니다.

대부분의 것이 Leaflet에 의해 직접 관리되기 때문에 React Component에서 Leaf map instance를 state로 추가하는 것이 의미가 있을지 모르겠습니다.

리플릿으로 마커를 만들 때도 마찬가지로 아무것도 반환되지 않기 때문에 렌더링할 것이 없습니다.논리 자체가 흐릿하게 느껴져요.

내가 만들기 시작한 건 이거야.동작하고 있는데, 코드를 잘못 써서 콘셉트를 놓치고 있는 것 같아요.

/** @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
        )
    });
})();

그래서 질문하겠습니다.

• 이 샘플이 진짜처럼 보이나요?
• 마커를 추가하고 이벤트를 관리하는 논리에 어떻게 접근하시겠습니까?

• 고유성, 즉 "UID"를 직접 관리할 필요는 없습니다.대신 를 사용하여 구성 요소의 실제 노드에 액세스할 수 있습니다.리플릿 API는 문자열 셀렉터 또는 HTMLlement 인스턴스를 지원합니다.
• 리플릿은 렌더링을 관리하고 있기 때문에map먹고 살면 안 된다state. 데이터만 저장state이것은 React의 DOM 요소 렌더링에 영향을 줍니다.

이 두 가지 포인트 외에 보통 리플릿 API를 사용하여 원하는 대로 리액트 컴포넌트로부터의 콜백을 리플릿 맵에 연결합니다.리액션은 이 시점에서 단순한 포장지일 뿐이다.

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

}

PaulLeCam의 리액트 리플릿 컴포넌트는 상세하지 않은 추가 답변으로 인기가 있는 것 같습니다.아직 사용하지 않았지만 유망해 보입니다.

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

업데이트: 견고합니다.아직 많은 기능을 사용하지 않았지만, 코드 베이스는 잘 쓰여져 있어 팔로잉과 확장이 용이하고, 사용한 기능은 즉시 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/26755251/good-way-to-combine-react-and-leaflet