结合React和Leaflet的好方法 [英] Good way to combine React and Leaflet

问题描述

我正在研究一个将React和Leaflet结合在一起的项目，但是我必须说我在语义上有些困难.

I am working on a project to combine React and Leaflet, but I must say I am having some hard time with the semantics.

由于大多数内容都是由Leaflet直接管理的，所以我不知道是否将Leaflet映射实例添加为React组件中的状态是否有意义.

As most of the stuff is managed by Leaflet directly, I don't know if it would make sense to add the Leaflet map instance as state in the React Component or not.

使用Leaflet创建标记时存在相同的问题，因为它不返回任何内容，因此我实际上没有任何要渲染的内容.在我看来，逻辑本身是模糊的.

Same problem when it comes to creating markers with Leaflet, as it does not return anything, I don't have anything to render really. The logic itself seems blurry to me.

这就是我开始做的.它正在工作，但是我感觉我在编写错误的代码并错过了这个概念.

Here is what I started to make. It's working but I feel like I'm writing bad code and missing the concept.

/** @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".相反，您可以使用 getDOMNode 来访问组件的实际节点. Leaflet的API支持字符串选择器或HTMLElement实例.
• 传单正在管理渲染，因此map不应存在于state上.仅将数据存储在state中，这会影响React对DOM元素的呈现.
• You don't need to manage uniqueness, i.e. "UID", yourself. Instead, you can use getDOMNode to access the component's real node. Leaflet's API supports either a string selector or an HTMLElement instance.
• Leaflet is managing rendering, so the map should not live on state. Only store data in state that affects React's rendering of the DOM element.

除了这两点，请正常使用Leaflet API，并根据需要将React组件中的回调与Leaflet映射联系起来.此时，React只是一个包装器.

Beyond those two points, use the Leaflet API normally and tie callbacks from your React component to the Leaflet map as you like. React is simply a wrapper at this point.

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

}

这篇关于结合React和Leaflet的好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！