Javascript 为什么传单地图不能在react应用程序上渲染

我在js实现中包含了传单映射，而不是jsx实现，但我有一个问题，因为它超出了它的范围

以下是我导入传单的方式：

import L from 'leaflet';

并实施：

componentDidMount() {
    // create map
    this.map = L.map('map', {
      center: [49.8419, 24.0315],
      zoom: 16,
      layers: [
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }),
      ]
    });
  }

使用方法：

<div id={"map"} > 

这就是我得到的

---

是的，您缺少css文件

顺便说一句，这不是你应该如何使用反应传单。 componentDidMount不是做你正在做的事情的地方。把它放在渲染器里

import { Map, TileLayer } from 'react-leaflet'; 
<Map>
      <TileLayer url="'http://{s}.tile.osm.org/{z}/{x}/{y}.png'" />
</Map>

---

您尚未在index.html中添加传单css文件

对于传单版本1.3.4，将以下内容添加到index.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>  

添加后，使用react传单的贴图和TileLayer组件渲染贴图

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet";
import "./styles.css";

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);  

---

您可以在这里找到工作代码

检查添加传单css文件的可能副本修复了该问题，谢谢@xmojmr

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet";
import "./styles.css";

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);