just updated react-leaflet
version from 1.9.1 to 2.0.0 and got a weird error:
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`.
I need to upgrade react-leaflet
at least to version 2 so that I can use withLeaflet
function to render vector tiles inside react-leaflet
. Related post: https://stackoverflow.com/a/53317460/6399631
The file which contains Map
component in my project;
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;
I'm using;
"react": "16.4.1",
"leaflet": "1.3.1"
Do you have any solution?
Solved this issue. The problem isn't related to react-leaflet
or props
. It appears that I'm using react-dom
version 16.0.0
. Updated my react-dom
version to 16.4.1
and my problem is solved now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.