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. 精选4款基于.NET开源、功能强大的通讯调试工具

    前言 今天大姚给大家分享4款基于.NET开源.功能强大的通讯调试工具,旨在帮助.NET开发者们更好的应对通讯调试方面的学习和工作,提升调试效率. LLCOM LLCOM是一个.NET开源的.功能强大的 ...

  2. [BZOJ4605] 崂山白花蛇草水 题解

    突然想买一瓶,然后喝上几口.(不要命的想法) 动态全局 \(k\) 大想到权值线段树上二分. 由于要存储二维的点,所以得用到我们神通广大的 \(KDT\) 了. 那么想到权值线段树套 \(KDT\) ...

  3. 当向json数组追加节点时,再去修改它,发现所有的该节点的数据都被修改了

    当向一个json数组追加的节点被修改时,所有对象的的节点都被修改了 众所周知,追加json节点时,我们通常会直接给不存在的节点赋值 比如这样: let json = [ { id:'1' }, { i ...

  4. 【COM3D2Mod 制作教程(2)】Mod 底层原理

    [COM3D2Mod 制作教程(2)]Mod 底层原理 Mod 是什么? Mod 一词想必你已经听过很多次了,因为很多游戏都可以装 Mod,而 Mod 可以为游戏增添一些额外的乐趣.但在 COM3D2 ...

  5. yarn的安装与配置(秒懂yarn用法)

    安装和配置Yarn可以通过以下步骤完成: 安装Node.js:首先,确保已经安装了Node.js.可以通过在终端中运行node -v来检查是否已安装.如果没有安装,可以从Node.js官方网站(htt ...

  6. docker下安装Harbor

    安装docker-compose # 安装docker-compose curl -L https://github.com/docker/compose/releases/download/1.18 ...

  7. 基于项目的协同过滤推荐算法(Item-Based Collaborative Filtering Recommendation Algorithms)

    前言 协同过滤推荐系统,包括基于用户的.基于项目的息肉通过率等,今天我们读一篇基于项目的协同过滤算法的论文. 今天读的论文为一篇名叫<基于项目的协同过滤推荐算法>(Item-Based C ...

  8. 豆包:php如何模拟多客户端访问服务器

    在 PHP 中模拟多客户端访问服务器可以通过以下几种方式实现,具体方法根据需求选择: 方法 1:使用 cURL 多请求(Multi Handle) 通过  curl_multi_*  系列函数实现并发 ...

  9. k8s node节点报错 dial tcp 127.0.0.1:8080: connect: connection refused

    前言 在搭建好 kubernetes 环境后,master 节点拥有 control-plane 权限,可以正常使用 kubectl. 但其他 node 节点无法使用 kubectl 命令,即使同步过 ...

  10. linux clickhouse 密码设置

    默认密码 clickhouse 安装好之后,系统默认的登录账号密码是 /etc/clickhouse-server/users.d/default-password.xml 文件中配置的,默认密码是 ...