TileLayer wird in anderer Reihenfolge angezeigt (React-Leaflet-Bibliothek verwenden)

Question

Ich versuche, eine einfache Web-App zu verwenden, indem ich das reactive-letable der Bibliothek verwende.

Ich habe den folgenden Code:

import React from 'react'; 
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'; 

class LeafletMap extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     lat: 51.505, 
     lng: -0.09, 
     zoom: 13, 
    }; 
    } 

    render() { 
    const position = [this.state.lat, this.state.lng]; 
    return (
     <Map center={position} zoom={this.state.zoom}> 
     <TileLayer 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
     /> 
     <Marker position={position}> 
      <Popup> 
      <span>A pretty CSS3 popup. <br/> Easily customizable.</span> 
      </Popup> 
     </Marker> 
     </Map> 
    ); 
    } 
} 
export default LeafletMap; 

jedoch Der TileLayer wird in zufälliger Reihenfolge die ganze Zeit angezeigt wird. Ich habe eine Menge Code gelesen, wo es mit ComponentDidMount() von Reactjs arbeiten muss, aber die Rendern, die ich gesehen habe, sind völlig anders als die Bibliothek.

Haben Sie eine Idee, was kann ich tun?

Grüße!

Answer 1

Der einzige Grund, warum es nicht funktioniert, weil wir den folgenden Code in index.html hinzufügen müssen:

<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" /> 
<style type="text/css"> 
    .leaflet-container { 
     height: 400px; 
    } 
</style> 

Das ist alles.