Reagieren und Leaflet

Question

Ich versuche, Leaflet in meiner React App zu verwenden. Ich stoße auf ein Problem. Leaflet.js erfordert, dass die div-Komponente beim Initiieren der Zuordnung vorhanden ist. Reagieren "erstellt" das div nicht, bis es die Komponente rendert, so dass die Broschüre einen Fehler erzeugt. Sowohl getDOMNode() als auch findDOMNode() geben aus irgendeinem Grund "keine Funktion" zurück.

Code:

import React from 'react'; 
import {render} from 'react-dom'; 
import L from 'leaflet'; 

... ein wenig später

export default class Mapbox extends React.Component { 
    render() { 
    var map = L.map('map').setView([51.505, -0.09], 13); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 

    return (

     <div id="map"> 
    <h1>hi</h1> 
    </div> 
    ); 

Dies gibt einen Fehler, dass "Map Container nicht gefunden".

Danke.

Answer 1

Sie können Karte innerhalb componentDidMount

class Mapbox extends React.Component { 
    componentDidMount() { 
    this.map(); 
    } 

    map() { 
    var map = L.map('map').setView([51.505, -0.09], 13); 

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(map); 
    } 

    render() { 
    return <div id="map">xx</div> 
    } 
} 

Example

Answer 2

Use "refs" initialisieren. Refs wird verwendet, um einen Verweis auf das Element zurückzugeben. docs here

class Map extends React.Component { 

    componentDidMount() { 
    const node = this.node; 
    var map = var map = L.map(node).setView([51.505, -0.09], 13); 
    } 

    render() { 
    return <div ref={(node) => { this.node = node }}></div> 
    } 
}