reactjs - 传单永远不会加载，使屏幕空白且没有错误

Question

我正在尝试构建一个带有地图的 reactjs 应用程序，我想使用传单，因为它很受欢迎，而且它是免费和开源的。我试图使用库传单和反应传单。我最近的尝试是用反应钩子实现传单。无论我尝试哪种方法，我都会得到相同的结果，这是一个空白屏幕，控制台中没有错误。如果我检查反应开发工具组件栏，一切似乎都加载正常，并且地图位于应用程序层次结构中。

1. 我在 public/index.html 中添加了传单的样式表

   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
   

2. 这是我的地图挂钩组件

   import React, { useEffect } from 'react';
   import L from 'leaflet';
   
   function Map() {
     useEffect(() => {
       // create 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'
           }),
         ]
       });
     }, []);
   
     return <div id="map"></div>
   }
   
   export default Map;`
   

标签： reactjsecmascript-6leaflet

Answer 1

您尚未设置地图高度，这就是您什么也看不到的原因：更改此行：

return <div id="map"></div>

到：

return <div id="map" style={{ height: "100vh" }} />;

覆盖整个屏幕或给出您选择的高度，然后它应该呈现。

演示