Reactjs 即使使用传单.css导入，也无法正确显示反应传单地图

我正在尝试在爱奥尼亚创建带有reac传单的地图，但我没有正确显示它，也遵循以下链接：

窗口大小调整修复它。第一次登录时我做错了什么

第一次访问时，这是地图：

调整大小后：

这是代码

在index.html中

Home.tsx已简化

import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

function Home() {

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Logged in ... </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <Map center={[45.24,8.55]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[45.24,8.55]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
        </Map>
      </IonContent>
    </IonPage>
  )
}

export default Home; 

---

谢谢。

这是我目前正在做的工作，为我工作：

windowDimensions.tsx

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height,
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions(),
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

app.js或componentfile.js

import useWindowDimensions from 'path/to/useWindowDimensions'; //in my case i saved it as app/utils/windowDimensions
    <Map style={{height: mapHeight}} />

从'path/to/useWindowDimensions'导入useWindowDimensions//在我的例子中，我将其保存为app/utils/windowDimensions

注意：app.js仅包含与修复相关的代码

  <link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'>

---

试试这个

我对离子5和反应传单3也有同样的问题，我这样解决：

在使用传单react组件的页面中（在您的示例中为主页），导入UseIonViewDiCenter生命周期方法（）以了解IonPage何时完成动画制作，然后触发窗口调整事件

import { IonPage, useIonViewDidEnter, ... } from '@ionic/react';
function Home() {

     /* 
      * trigger a 'window-resize' event when Page has finished, 
      * rendering and animating, so leaflet map can read a 
      * consistent height value
      */
     useIonViewDidEnter(() => {
        window.dispatchEvent(new Event('resize'));
     });

     return (
        <IonPage>
           ... your Leaflet component...
        </IonPage>
     );
}

从'@ionic/react'导入{IonPage，useIonViewDidEnter，…}；
函数Home（）{
/* 
*页面完成后触发“窗口大小调整”事件，
*渲染和设置动画，以便传单贴图可以读取
*一致高度值
*/
UseonViewDiCenter（（）=>{
dispatchEvent（新事件（'resize'））；
});
返回(
…您的传单组件。。。
);
}

这对我来说很有效。

---

如果有帮助，请告诉我。

您需要调用

map.invalidateSize（）

看看这里：您的示例很有效，即使没有使用

invalidateSize

，但我使用的是react传单。本例中使用的是传单。相同。谢谢，这就解决了。我认为这不是一种“正确”的方式（react传单上肯定有一些在创业时发生的奇怪事情），但它是一种很好的解决方法。谢谢。这里很好地解释了（在某些情况下）它在第一次渲染时不能正确显示的原因->我发现“窗口大小调整”方法是一个很好的解决方案，因为它不会像invalidateSize（）那样干扰传单实例。但是的，这仍然是一个解决办法：）

import { IonPage, useIonViewDidEnter, ... } from '@ionic/react';
function Home() {

     /* 
      * trigger a 'window-resize' event when Page has finished, 
      * rendering and animating, so leaflet map can read a 
      * consistent height value
      */
     useIonViewDidEnter(() => {
        window.dispatchEvent(new Event('resize'));
     });

     return (
        <IonPage>
           ... your Leaflet component...
        </IonPage>
     );
}