首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react-leaflet库中的映射组件给出“不变冲突:元素类型无效”错误

react-leaflet库中的映射组件给出“不变冲突:元素类型无效”错误
EN

Stack Overflow用户
提问于 2019-10-11 23:39:37
回答 1查看 153关注 0票数 0

刚刚将react-leaflet版本从1.9.1更新到2.0.0,并收到一个奇怪的错误:

代码语言:javascript
运行
复制
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,这样我才能在react-leaflet中使用withLeaflet函数来渲染矢量瓦片。相关帖子:https://stackoverflow.com/a/53317460/6399631

我的项目中包含Map组件的文件;

代码语言:javascript
运行
复制
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;

我正在使用;

代码语言:javascript
运行
复制
"react": "16.4.1",
"leaflet": "1.3.1"

你有什么解决方案吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-15 20:44:47

解决了这个问题。这个问题与react-leafletprops无关。似乎我使用的是react-dom版本的16.0.0。将我的react-dom版本更新到16.4.1,现在我的问题就解决了。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58344553

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档