反应传单地图不呈现答案

【问题标题】：react leaflet map does not render反应传单地图不呈现
【发布时间】：2023-02-09 18:20:00
【问题描述】：

我的反应传单应用程序有一个奇怪的问题。我想用 React ionic 创建传单地图。当我运行它时，地图无法正确呈现。

但是，当我在 MapContainer 之前添加 <div></div> 或任何元素，并单击保存时，地图渲染没有任何问题。

 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <MapContainer className='map-container' center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={[51.505, -0.09]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>

      </IonContent>
    </IonPage>
  );
};

export default Tab1;

现在，如果我只是刷新应用程序，地图就会消失，并且不会再次正确显示。

【问题讨论】：

嘿，你可以复制并粘贴代码 sn-p 而不是发布屏幕截图吗？这样，它可以被更好地索引，而且人们也可以粘贴代码来玩弄它以得出答案。

标签： reactjs ionic-framework leaflet

【解决方案1】：

这个解决方案：here，为我解决了这个问题。

【讨论】：

请不要添加我也是作为答案。它实际上并没有提供问题的答案。如果您有不同但相关的问题，请ask它（如果它有助于提供上下文，请参考此问题）。如果你对这个具体问题感兴趣，你可以upvote它，留下comment，或者一旦你有足够的reputation就开始bounty。
如果您认为 Stack Overflow 上的另一个问题也能回答这个问题，请不要只是链接转储该答案（实际上永远不要发布仅链接的答案）。相反，flag it as a duplicate，从而将这个问题与目标联系起来，保持知识集中。