TileLayer 以不同的顺序显示（使用 React-Leaflet 库）

Question

I'm trying to do a simple Web App using the library react-leaflet.

I have the following 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;

However, The TileLayer is displaying in random order all the time. I've read a lot of code where It must work with ComponentDidMount() by Reactjs , but The renders that I've seen are totally different compared to the library.

Do you have any idea what can I do?

Answer 1

The only reason It was not working is because we need to add the following code in index.html :

<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>

That's all.