web-dev-qa-db-fra.com

Bon moyen de combiner React et Leaflet

Je travaille sur un projet pour combiner React et Leaflet, mais je dois dire que j'ai du mal avec la sémantique.

Comme la plupart des choses sont gérées directement par Leaflet, je ne sais pas s'il serait logique d'ajouter l'instance de carte Leaflet en tant qu'état dans le composant React React ou non.

Même problème quand il s'agit de créer des marqueurs avec Leaflet, car il ne retourne rien, je n'ai vraiment rien à rendre. La logique elle-même me semble floue.

Voici ce que j'ai commencé à faire. Cela fonctionne, mais j'ai l'impression d'écrire du mauvais code et de manquer le 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
        )
    });
})();

Mes questions sont donc:

  • Cet échantillon vous semble-t-il légitime?
  • Comment aborderiez-vous la logique de l'ajout de marqueurs et la gestion de leurs événements?
javascriptleafletreactjs
32
soueuls
  • Vous n'avez pas besoin de gérer vous-même l'unicité, c'est-à-dire "UID". Au lieu de cela, vous pouvez utiliser getDOMNode pour accéder au nœud réel du composant. L'API de Leaflet prend en charge un sélecteur de chaîne ou une instance HTMLElement.
  • Leaflet gère le rendu, donc map ne doit pas vivre sur state. Stockez uniquement les données dans state qui affectent le rendu React de l'élément DOM.

Au-delà de ces deux points, utilisez l'API Leaflet normalement et liez les rappels de votre composant React à la carte Leaflet comme vous le souhaitez. React est simplement un wrapper à ce 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>
        );
    }

}
41
Ross Allen

En tant que réponse supplémentaire, moins détaillée, le composant React-Dépliant de PaulLeCam semble populaire. Je ne l'ai pas encore utilisé mais il semble prometteur:

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

MISE À JOUR: C'est solide. Je n'ai pas encore utilisé de nombreuses fonctionnalités, mais la base de code est bien écrite et facile à suivre et à étendre, et ce que j'ai utilisé fonctionne très bien dès le départ.

21
ericsoco