問題描述

我正在做一個結合 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 >OpenStreetMap</a> contributors, <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 >OpenStreetMap</a> contributors, <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 的好方法的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！