प्रतिक्रिया और लिफाफा

Question

गठबंधन करने का अच्छा तरीका मैं प्रतिक्रिया और पत्रिका को गठबंधन करने के लिए एक परियोजना पर काम कर रहा हूं, लेकिन मुझे कहना होगा कि मुझे अर्थशास्त्र के साथ कुछ कठिन समय है।

चूंकि अधिकांश चीजें सीधे पत्रक द्वारा प्रबंधित की जाती हैं, मुझे नहीं पता कि यह संदर्भ पत्र में राज्य के रूप में पत्रक मानचित्र उदाहरण जोड़ने के लिए समझ में आता है या नहीं।

उसी समस्या को जब पत्रक के साथ मार्कर बनाने की बात आती है, क्योंकि यह कुछ भी वापस नहीं करता है, मेरे पास वास्तव में प्रस्तुत करने के लिए कुछ भी नहीं है। तर्क खुद को धुंधला लगता है।

यहां मैंने जो करना शुरू किया है। यह काम कर रहा है लेकिन मुझे लगता है कि मैं खराब कोड लिख रहा हूं और अवधारणा को याद कर रहा हूं।

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

तो मेरी प्रश्न हैं:

• इस नमूने कानूनी प्रतीत होता है?
• मार्कर जोड़ने और उनकी घटनाओं के प्रबंधन के तर्क से आप कैसे संपर्क करेंगे?

Answer 1

• आप विशिष्टता का प्रबंधन करने, अर्थात "यूआईडी", अपने आप को जरूरत नहीं है। इसके बजाए, आप घटक के असली नोड तक पहुंचने के लिए getDOMNode का उपयोग कर सकते हैं। पत्रक का एपीआई या तो एक स्ट्रिंग चयनकर्ता या एक HTMLElement उदाहरण का समर्थन करता है।
• पत्रक प्रतिपादन का प्रबंधन कर रहा है, इसलिए mapstate पर नहीं रहना चाहिए। केवल state में डेटा संग्रहित करें जो DOM तत्व की प्रतिक्रिया के प्रतिपादन को प्रभावित करता है।

उन दो बिंदुओं से परे, सामान्य रूप से लिफाफा एपीआई का उपयोग करें और अपने प्रतिक्रिया घटक से कॉलबैक को अपनी पसंद के अनुसार पत्रक मानचित्र पर टाई करें। प्रतिक्रिया इस बिंदु पर बस एक रैपर है।

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

} 

Answer 2

अतिरिक्त, कम विस्तृत उत्तर के रूप में, पॉललेकैम का प्रतिक्रिया-पत्र घटक लोकप्रिय लगता है। अभी तक यह प्रयोग किया जाता है नहीं, लेकिन यह आशाजनक दिखता है:

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

अद्यतन: यह ठोस है। अभी तक कई सुविधाओं का उपयोग नहीं किया है, लेकिन कोडबेस अच्छी तरह से लिखा है और अनुसरण करने और विस्तार करने में आसान है, और जो मैंने उपयोग किया है वह बॉक्स से बाहर काम करता है।