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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
"react": "16.4.1",
"leaflet": "1.3.1"

你有什么解决方案吗?

EN

回答 1

Stack Overflow用户

回答已采纳

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

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

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

https://stackoverflow.com/questions/58344553

复制
相关文章
ElementUI中的日历组件加载无效的问题
  在ElementUI中提供了一个日历组件。在某些场景下还是比较有用的。只是在使用的时候会有些下坑,大家要注意下。
用户4919348
2023/08/24
4010
ElementUI中的日历组件加载无效的问题
JDBC:Java数组和数据库中Array类型的映射
如果使用Hibernate框架,Java类型和数据库类型的映射可以通过配置文件进行。
卡尔曼和玻尔兹曼谁曼
2019/01/25
3.4K0
TS 类型体操:索引类型的映射再映射
TypeScript 给 JavaScript 加了套静态类型系统。其中,JavaScript 中的数组、对象等聚合多个元素的类型在 TypeScript 中对应的是索引类型。
神说要有光zxg
2022/03/03
9940
TS 类型体操:索引类型的映射再映射
Codable 解析 JSON 忽略无效的元素
默认情况下,使用 Swift 内置的 Codable API 编码或解码数组只有全部成功或者全部失败两种情况。可以成功处理所有元素,或者引发错误,这可以说是一个很好的默认设置,因为它可以确保高水平的数据一致性。
韦弦zhy
2021/04/07
3.2K0
SQLException: 无效的列类型: 1111
org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.jdbc.UncategorizedSQLException: Error setting null for parameter #1 with JdbcType OTHER . Try setting a different JdbcType for this para
程裕强
2022/05/06
1.7K0
父元素opacity属性对子元素的影响(子元素设置opacity无效)
这段时间做了一个项目优化,对于原有的内容进行了重新设计实现,其中一项就是对于label标签添加hover层进行解释说明,最常用的办法及时label的容器设置relative,然后hover层作为它的子元素设置absolute,然后在使用label的hover伪类来控制hover层的显示和隐藏,这其中一个要求及时hover层必定要求能够遮住页面中其他的元素,所以最常用的办法是设置它的背景颜色,然后让它的z-index处于合理的位置,一切都是这样设计的,但是最终的效果却出现了hover层设置bg为#fff的时候,hover层显示时还是会把底部内容给透出来,第一反应就是opacity设置为1,但是还是没有效果(因为背景为白色,所以有点坑)
全栈程序员站长
2022/09/01
3.2K0
父元素opacity属性对子元素的影响(子元素设置opacity无效)
mybatis中jdbctype与java类型映射
MyBatis 在设置预处理语句(PreparedStatement)中的参数或从结果集中取出一个值时, 都会用类型处理器将获取到的值以合适的方式转换成 Java 类型。下表描述了一些默认的类型处理器。
DencyCheng
2020/12/18
1.9K0
vue组件中修改组件外元素样式
以上方式修改某些组件的样式,这样会涉及到从 html 层级选择,由于我 style 标签是这样写的
蓓蕾心晴
2023/05/31
5940
行内元素的padding和margin是否无效
常用块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
IT人一直在路上
2019/09/18
2.6K0
行内元素的padding和margin是否无效
com组件中的数据类型
可以转换long为_variant_t,但是没有int的转换函数,所以很多像ado函数不接受常量,需要强转long类型
sofu456
2021/12/06
8120
Mybatis 批量更新无效字符的错误
使用<foreach></foreach> 批量insert时报错 ORA-00911: 无效字符的错误
三哥
2018/12/24
1.9K0
mmap映射类型
文件映射和匿名映射都是操作系统中对于内存映射的两种类型,主要应用于进程间的通信或者大量数据的处理。
233333
2023/08/11
2770
TypeScript 之映射类型
有的时候,一个类型需要基于另外一个类型,但是你又不想拷贝一份,这个时候可以考虑使用映射类型。
玖柒的小窝
2021/12/06
6740
TypeScript 之映射类型
TypeScript-映射类型
那么这个时候根据 TestInterface1 创建出来的新的类型就称之为映射类型,例如如下的 TestInterface2:
杨不易呀
2023/09/29
2200
MyBatis中的JdbcType映射数据类型对照表
在Mybatisd的映射文件mapper.xml中,会用jdbcType把java类映射数据库表字段,有关映射关系做个笔记,方便查阅。
全栈程序员站长
2022/11/01
7660
Android为属性组件动画无效
本来我的代码是这样的 然后发现这动画只能在窗体onCreate的时候使用有效。 放在点击事件之类的就不行了。 后经百度发现需要开始动画而不是设置动画 carImg.startAnimation(animation);
SingYi
2022/07/13
7970
Android为属性组件动画无效
【TS】1294- 搞懂 TypeScript 中的映射类型(Mapped Types)
本文会和大家详细介绍 TypeScript 中的映射类型(Mapped Type),看完本文你将学到以下知识点:
pingan8787
2022/06/07
2.4K0
【TS】1294- 搞懂 TypeScript 中的映射类型(Mapped Types)
React技巧之组件中返回多个元素
原文链接:https://bobbyhadz.com/blog/react-return-multiple-elements[1]
chuckQu
2022/08/19
1K0
React技巧之组件中返回多个元素
kettle的应用组件 、流程组件、查询组件、连接组件、统计组件、映射组件、脚本组件
2.3、空操作一般作为数据流的终点。在kettle的sample例子中经常使用,但是实际开发中很少使用。
别先生
2020/02/26
3.7K0
组件分享之后端组件——Goalng中好用的json组件库
近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。
cn華少
2022/03/06
7450
组件分享之后端组件——Goalng中好用的json组件库

相似问题

错误:不变冲突:元素类型无效

10

不变冲突:元素类型无效:

30

不变冲突:元素类型无效

10

不变冲突元素类型无效

11

React本机元素错误:不变冲突:元素类型无效

323
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文