Reactjs React传单正在创建两张地图

我试图创建一个小地图，但由于某些原因，react传单渲染了两次地图。 我认为它的容器不够大，无法容纳地图，所以它会将其翻译出来，但我不知道它应该有多大。 文档中并没有真正提到这一点

   import React from 'react';
   import { MapContainer, TileLayer } from 'react-leaflet';
        
    const MapStyle = {
      height: '100px',
      width: '100px',
    };
    
    const MiniMap = assetLocation => {
      return (
        <MapContainer center={[45.4, -75.7]} zoom={13} scrollWheelZoom={false} style={MapStyle}>
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </MapContainer>
      );
    };

从“React”导入React；
从“react传单”导入{MapContainer，TileLayer}；
常量映射样式={
高度：“100px”，
宽度：“100px”，
};
const MiniMap=assetLocation=>{
返回(
);
};

我在Antd的网格系统中实现它

<Row>
  <Space>
    <Col>
      <MiniMap assetLocation={item} />
      <NavButtons id={id} />
    </Col>
   <Col>{ ...otherComponents }</Col>
  </Space>

{…其他组件}

---

我错过了传单的CSS。 只需将其导入react组件：

---

导入“传单/目录/传单.css”
实际地图的代码在哪里？我只看到小地图的代码和你包含它的地方。你能把实际地图和小地图的代码加在一起吗？Minimap comp应该是MapContainer的一个孩子，但在你的代码中似乎不是这样。代码是正确的，你不是在两个地方实例化了它吗？@kboul你是什么意思？我共享了MiniMap组件——MapContainer直接来自react传单库。不，我只引用了一次。它实际上是一个地图，但它正在转换它，因为它不适合地图容器，但即使我使地图容器变大，它仍然会抛出一个错误检查官方文档上的此示例。它有你需要的一切。一个定义大地图的
MapContainer
，另一个在
MinimapControl
中包含小地图。第二个是第一个的孩子。@kboul我不想在地图里放一个小地图。我想这就是困惑。我希望我的地图是我仪表板上的一个小正方形。很抱歉造成混淆，但小地图组件只是一个小地图（可能是300px 300px）