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原因的更多相关文章

  1. React报错之React.Children.only expected to receive single React element child

    总览 当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.only expected to receive single React el ...

  2. 安装skype for business server组件 报错“未满足先决条件”和安装KB2982006补丁提示“此更新不适用于你的计算机”

    安装skype for business server组件 报错“未满足先决条件” 上网经查询发现是没有安装KB2982006-x64 更新补丁 去官网上找这个补丁,发现这个补丁要热更新啥的,还要写邮 ...

  3. VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题

    VUE基础之:visible.sync-模态框显示隐藏.elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了,最近终于有时间拉出来写完了.... 我们日常开 ...

  4. Navicat 用ssh通道连接时总是报错 (报错信息:SSH:expected key exchange group packet form serve

    转:https://blog.csdn.net/qq_27463323/article/details/76830731 之前下了一个Navicat 11.0 版本 用ssh通道连接时总是报错 (报错 ...

  5. React使用antd按需引入报错

    引言 按照antd官网配置按需引入,还是出现一系列的报错: 原因 在网上搜了一下,大部分说是react-scripts以及react-app-rewired版本不兼容的问题,我果断把下载低版本 npm ...

  6. node+react 打包成功,控制台报错

    控制台报错: 'ReactCurrentOwner' of undefined 解决办法:RN版本的问题. As I mentioned, make sure you've installed the ...

  7. 创建新react项目 运行npm start 报错踩过的坑

    1.看react官网创建新的react项目 :npx create-react-app my-app    cd到my-app  npm start 遇见如下报错 这是因为电脑本地git的原因 ,不是 ...

  8. react脚手架抽离webpack报错解决

    我们在写react项目的时候,可能原有的webpack配置不满足我们的需求,需要自己去配置,可是你在创建脚手架的时候并不能在外部找到webpack文件,脚手架的webpack文件在node_modul ...

  9. react服务端渲染同构报错Browser history needs a DOM

    https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..

  10. 六、react添加多个className报错解决方法

    例如<div className={style.calss1,style.class2}></div> 该方法会报错 想得到最终渲染的结果:<div class='cla ...

随机推荐

  1. el-table关于选择行的三个常用事件

    变量声明 data(){ return{ selectList: [], } } 事件绑定 <el-table @select-all="selectAllChange" @ ...

  2. 并发编程 - 线程同步(四)之原子操作Interlocked详解一

    上一章我们了解了原子操作Interlocked类的设计原理及简单介绍,今天我们将对Interlocked的使用进行详细讲解. 在此之前我们先学习一个概念--原子操作. 01.Read方法 该方法用于原 ...

  3. .NET最佳实践:webapi返回IAsyncEnumerable提升性能

    什么是IAsyncEnumerable IAsyncEnumerable<T> 是 .NET 中用于表示异步数据流的接口. 它允许你逐个异步地获取数据项,而不是将所有数据一次性加载到内存中 ...

  4. linux mint安装远程连接工具,类似于xshell的PAC

    从指定的URL下载文件 wget http://sourceforge.net/projects/pacmanager/files/pac-4.0/pac-4.5.5.7-all.deb   安装依赖 ...

  5. ORACLE 分页排序后的数据重复或缺失问题

    今天一大早业务人员就反映说用户导出的订单数据,有好几单是重复,并且缺失了某一单. 第一步:查询数据表.表里实际数据没有重复,也没有缺失.那么就可能是导出过程出错了(因为是异步分页导出,所以最先怀疑这部 ...

  6. JUC并发—2.Thread源码分析及案例应用

    大纲 1.什么是线程以及并发编程 2.微服务注册中心案例 3.以工作线程模式开启微服务的注册和心跳线程 4.微服务注册中心的服务注册功能 5.微服务注册中心的心跳续约功能 6.微服务的存活状态监控线程 ...

  7. Trae初体验

    前情 自从AI IDE面世以来,网络上到处流传程序员要失业了,小白也能轻松完成程序开发了,某某0基础靠AI上架了苹果应用,平时工作也有偶尔用用AI工具的我,都觉得这些都是标题党文章不予理会的,直到看到 ...

  8. xbox商店访问、下载速度慢,如何提升下载速度?

    Xbox下载速度慢可能是由于多种原因,例如网络连接问题.微软服务器问题等.以下是一些可以尝试的方法来提升Xbox的下载速度: 更改网络设置:以WIN11举例:鼠标右键点电脑桌面右下角的网络图标,选择& ...

  9. 【答题系统可参考】php 禁止api被跨域调用

    在 PHP 中,防止 API 被跨域调用可以通过设置适当的 HTTP 响应头来实现.跨域资源共享(CORS,Cross-Origin Resource Sharing)机制允许或拒绝来自不同源的请求. ...

  10. (C++实现)2-NAF

    (C++实现)2-NAF 前言 ‍ 任何一个非负整数,都有一个唯一的 NAF (Non-adjacent form) 表示. 因着课程的缘由,我不得不研究一下 NAF 是怎么实现的,也是现学现用. ‍ ...