Reactjs 在React项目中部分加载传单地图

我试图在react组件中实现一个简单的传单映射。由于某些原因，地图的平铺没有加载或以随机顺序加载。还有其他人经历过吗

以下是应用程序的代码沙盒：

代码如下：

从“React”导入React；
从“react dom”导入react dom；
从“传单”中导入*作为L；
导出默认类映射扩展React.Component{
map=null；
componentDidMount（）{
var map=（this.map=L.map）（ReactDOM.findDOMNode（this）{
minZoom:2，
maxZoom:20，
图层：[
L.tileLayer（“http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”{
归属：
“©；贡献者，”
})
],
属性控制：false
}));
map.on（“单击”，this.onmapplick）；
map.fitWorld（）；
}
组件将卸载（）{
如果（！this.map）返回；
this.map.off（“单击”，this.onmaplick）；
this.map=null；
}
onmaplick=（）=>{
//做一些很棒的地图事情。。。
};
render（）{
返回；
}
}

有什么想法吗

您确实忘记了包含传单CSS文件

您错误地指定了

.map

容器高度

1。包括传单CSS

请注意您在评论中提到的工作示例是如何导入传单资产的（在

Map/shallet.js

文件中）：

从“传单”导入L；//与带有网页的“传单”中的“导入”相同
输入“传单/目录/传单.css”；

请注意，它显式导入传单CSS文件。当它丢失时，您的分幅将显示为无序排列并分布在页面上

Webpack有一个

样式加载器

和

css加载器

，用于在JS文件中引用这些css资产时正确管理它们

2。指定地图容器高度

在失败代码示例中，使用CSS指定

容器：

.map{
身高：100%；
}

请注意，百分比值基于元素的父节点值，即在本例中为父节点高度的100%

您的DOM层次结构是：

但您尚未为地图容器的任何祖先指定任何高度（即

html

、

body

、

#root

和

.App

）。由于它们唯一的子对象是

.map

，因此它们没有任何其他东西可以增加其大小，因此它们的高度为0

而您的

.map

的高度是0的100%，即0

确保还为每个祖先指定了高度值：

html，
身体，
#根，
.App{
保证金：0；
身高：100%；
}

或者为地图容器使用明确的高度值，例如在

px

中

---

更新的代码沙盒：

不知道reactjs，但这似乎是一个css问题。您确定正确包含了.css文件吗？我添加了一个样式来设置高度和宽度，但问题仍然存在。这里有一个有效的例子：谢谢。丢失的样式表修复了它。