结合 React 和 Leaflet 的好方法

2022-01-12 00:00:00 reactjs leaflet javascript

我正在做一个结合 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 实例.
  • Leaflet 正在管理渲染，因此 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>
        );
    }

}

相关文章