React AntD的Dropdown组件报错:React.Children.only expected to receive a single React element child.可能的n原因
React.Children.only expected to receive a single React element child.
Error: React.Children.only expected to receive a single React element child. at Object.onlyChild [as only] (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-AWAXCICB.js?v=d48d4aee:803:21) at Dropdown2 (http://127.0.0.1:5173/node_modules/.vite/deps/antd.js?v=d48d4aee:29936:35)
······
这个报错很明显,提示我们React Children.只应接收单个React元素的子项,然后我们去检查,代码,是单一子元素啊,em...
下面总结原因:
1、不换行报错(最离谱)
错误代码:
<Dropdown menu={ {items:headerMenus} }><span >user</span> </Dropdown >
改成如下错误消失:
<Dropdown menu={{ items: headerMenus }}>
<span>user</span>
</Dropdown>
2、子元素确实不是唯一的
比如:
<Dropdown menu={{ items: headerMenus }}>
<span>user </span>
<span></span>
</Dropdown>
3、menu属性传递的值不是一个带有items属性的对象
这就属于看antd的文档不仔细了,但是这个报错提示确实可谓谬以千里了。。。
React AntD的Dropdown组件报错:React.Children.only expected to receive a single React element child.可能的n原因的更多相关文章
- React报错之React.Children.only expected to receive single React element child
总览 当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.only expected to receive single React el ...
- 安装skype for business server组件 报错“未满足先决条件”和安装KB2982006补丁提示“此更新不适用于你的计算机”
安装skype for business server组件 报错“未满足先决条件” 上网经查询发现是没有安装KB2982006-x64 更新补丁 去官网上找这个补丁,发现这个补丁要热更新啥的,还要写邮 ...
- VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题
VUE基础之:visible.sync-模态框显示隐藏.elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了,最近终于有时间拉出来写完了.... 我们日常开 ...
- Navicat 用ssh通道连接时总是报错 (报错信息:SSH:expected key exchange group packet form serve
转:https://blog.csdn.net/qq_27463323/article/details/76830731 之前下了一个Navicat 11.0 版本 用ssh通道连接时总是报错 (报错 ...
- React使用antd按需引入报错
引言 按照antd官网配置按需引入,还是出现一系列的报错: 原因 在网上搜了一下,大部分说是react-scripts以及react-app-rewired版本不兼容的问题,我果断把下载低版本 npm ...
- node+react 打包成功,控制台报错
控制台报错: 'ReactCurrentOwner' of undefined 解决办法:RN版本的问题. As I mentioned, make sure you've installed the ...
- 创建新react项目 运行npm start 报错踩过的坑
1.看react官网创建新的react项目 :npx create-react-app my-app cd到my-app npm start 遇见如下报错 这是因为电脑本地git的原因 ,不是 ...
- react脚手架抽离webpack报错解决
我们在写react项目的时候,可能原有的webpack配置不满足我们的需求,需要自己去配置,可是你在创建脚手架的时候并不能在外部找到webpack文件,脚手架的webpack文件在node_modul ...
- react服务端渲染同构报错Browser history needs a DOM
https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..
- 六、react添加多个className报错解决方法
例如<div className={style.calss1,style.class2}></div> 该方法会报错 想得到最终渲染的结果:<div class='cla ...
随机推荐
- el-table关于选择行的三个常用事件
变量声明 data(){ return{ selectList: [], } } 事件绑定 <el-table @select-all="selectAllChange" @ ...
- 并发编程 - 线程同步(四)之原子操作Interlocked详解一
上一章我们了解了原子操作Interlocked类的设计原理及简单介绍,今天我们将对Interlocked的使用进行详细讲解. 在此之前我们先学习一个概念--原子操作. 01.Read方法 该方法用于原 ...
- .NET最佳实践:webapi返回IAsyncEnumerable提升性能
什么是IAsyncEnumerable IAsyncEnumerable<T> 是 .NET 中用于表示异步数据流的接口. 它允许你逐个异步地获取数据项,而不是将所有数据一次性加载到内存中 ...
- linux mint安装远程连接工具,类似于xshell的PAC
从指定的URL下载文件 wget http://sourceforge.net/projects/pacmanager/files/pac-4.0/pac-4.5.5.7-all.deb 安装依赖 ...
- ORACLE 分页排序后的数据重复或缺失问题
今天一大早业务人员就反映说用户导出的订单数据,有好几单是重复,并且缺失了某一单. 第一步:查询数据表.表里实际数据没有重复,也没有缺失.那么就可能是导出过程出错了(因为是异步分页导出,所以最先怀疑这部 ...
- JUC并发—2.Thread源码分析及案例应用
大纲 1.什么是线程以及并发编程 2.微服务注册中心案例 3.以工作线程模式开启微服务的注册和心跳线程 4.微服务注册中心的服务注册功能 5.微服务注册中心的心跳续约功能 6.微服务的存活状态监控线程 ...
- Trae初体验
前情 自从AI IDE面世以来,网络上到处流传程序员要失业了,小白也能轻松完成程序开发了,某某0基础靠AI上架了苹果应用,平时工作也有偶尔用用AI工具的我,都觉得这些都是标题党文章不予理会的,直到看到 ...
- xbox商店访问、下载速度慢,如何提升下载速度?
Xbox下载速度慢可能是由于多种原因,例如网络连接问题.微软服务器问题等.以下是一些可以尝试的方法来提升Xbox的下载速度: 更改网络设置:以WIN11举例:鼠标右键点电脑桌面右下角的网络图标,选择& ...
- 【答题系统可参考】php 禁止api被跨域调用
在 PHP 中,防止 API 被跨域调用可以通过设置适当的 HTTP 响应头来实现.跨域资源共享(CORS,Cross-Origin Resource Sharing)机制允许或拒绝来自不同源的请求. ...
- (C++实现)2-NAF
(C++实现)2-NAF 前言 任何一个非负整数,都有一个唯一的 NAF (Non-adjacent form) 表示. 因着课程的缘由,我不得不研究一下 NAF 是怎么实现的,也是现学现用. ...