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

Question

我正在尝试使用库react-leaflet创建一个简单的Web应用程序。

我有以下代码：

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;

但是，TileLayer始终以随机顺序显示。我已经阅读了很多必须与ComponentDidMount()by 一起使用的代码Reactjs，但是与库相比，我看到的渲染完全不同。

你知道我该怎么办吗？

问候！

Answer 1

不能正常工作的唯一原因是，我们需要在中添加以下代码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>

就这样。