来自 react-leaflet 库的地图组件给出 "Invariant Violation: Element type is invalid" 错误

Question

刚刚将 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 中渲染矢量图块。相关post：

我的项目中包含 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"

你有什么解决办法吗？

Answer 1

解决了这个问题。该问题与 react-leaflet 或 props 无关。看来我使用的是 react-dom 版本 16.0.0。将我的 react-dom 版本更新为 16.4.1，我的问题现在已解决。

来自 react-leaflet 库的地图组件给出 "Invariant Violation: Element type is invalid" 错误

Map component from react-leaflet library gives "Invariant Violation: Element type is invalid" error

javascript

leaflet

reactjs

react-leaflet