javascript - react-leaflet 库中的地图组件给出“不变违规:元素类型无效”错误
问题描述
刚刚将react-leaflet
版本从 1.9.1 更新到 2.0.0 并得到一个奇怪的错误:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Map`.
我需要react-leaflet
至少升级到版本 2,以便我可以使用withLeaflet
函数在里面渲染矢量图块react-leaflet
。相关帖子:https ://stackoverflow.com/a/53317460/6399631
包含Map
我项目中组件的文件;
import React, {Component} from "react";
import classNames from "classnames";
import {Map} from "react-leaflet";
class FdMap extends Component {
mapRef = (map) => {
if (map) {
this.mapLeaflet = map.leafletElement;
map.leafletElement.scrollWheelZoom.disable();
map.leafletElement.on("focus", function () {
map.leafletElement.scrollWheelZoom.enable();
});
map.leafletElement.on("blur", function () {
map.leafletElement.scrollWheelZoom.disable();
});
}
};
render() {
const {
className,
children
} = this.props;
const containerClassName = classNames(
"fd-map",
className
);
return (
<Map ref={this.mapRef}
{...this.props}
className={containerClassName}>
{children}
</Map>
);
};
}
export default FdMap;
我正在使用;
"react": "16.4.1",
"leaflet": "1.3.1"
你有什么解决办法吗?
解决方案
解决了这个问题。该问题与react-leaflet
or无关props
。看来我正在使用react-dom
version 16.0.0
。更新了我的react-dom
版本16.4.1
,我的问题现在解决了。
推荐阅读
- asp.net-core-mvc - 如何在 ASP.NET Core MVC 中绑定 Part 视图和局部视图中的所有子模型
- c# - Android(Xamarin):BottomNavigationView 没有出现在正确的位置
- python - 我做了 FFT(快速傅里叶变换),但我无法理解......(python)
- svelte - 苗条的过渡:如何淡入,然后淡出?
- web-services - 有关如何从 Google Cloud Platform 调用外部网络服务的任何信息?
- angularjs - 从 $http 承诺以编程方式关闭模式对话框
- java - 如何使用每个循环Java返回值
- python - Django .exclude() 返回空查询集
- docker - Redmine - 发送邮件的docker版本问题
- drools - 如何在循环中触发规则