Листовка никогда не загружается, оставляя экран пустым без ошибок

Question

Я пытаюсь создать приложение activjs с картой, я хотел бы использовать листовку из-за его популярности и того факта, что он бесплатный и с открытым исходным кодом. Я попытался использовать листовки библиотеки и листовки реакции. Моя последняя попытка реализовать листовки с реагирующими крючками. Независимо от того, какой подход я пробую, я получаю одинаковые результаты, это пустой экран без ошибок в консоли. если я проверяю панель компонентов реагирующих инструментов разработки, кажется, все загружается нормально, и карта находится в иерархии приложения.

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

Answer 1

Вы не установили высоту карты, поэтому вы ничего не видите: Измените эту строку:

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

на:

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

, чтобы покрыть весь экран или датьвысота по вашему выбору, и он должен сделать после этого.

Демо