如何使用反应叶与pREACT

Question

我正在尝试将react-Leaflet提前效果，几乎没有成功。我实际上确实渲染了地图，但没有一起渲染，因为在瓷砖中散布在页面上和包含元素之外。 我已经阅读了所有（某些）有关的问题，因此您需要从传单中导入CSS文件（导入“ feaflet/dist/dist/feaflet.css”），或将CSS文件包含在类中对于.Leaflet-container。我已经尝试了两者，但它仍然无法正常工作。 我遵循 react feack feaflet网站以安装必要的依赖关系的说明。 我的项目使用汇总，因此我将以下内容添加到我的汇总配置中：

      alias({
        entries: [
          { find: 'react', replacement: 'preact/compat' },
          { find: 'react-dom', replacement: 'preact/compat' },
          { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
          { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
        ]
      }),

我的组件看起来像这样：

import { h } from 'preact';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { Icon } from "leaflet";
import "../../styles/leaflet.css";

const Map = (): JSX.Element => {
  type LatLngTuple = [number, number];
  const position: LatLngTuple = [51.505, -0.09];

  return (

    <MapContainer center={position} 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={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>

  );
};

export default Map;