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. Win7下的文件权限

    平常编写的程序总会有配置功能,然后配置肯定是以文本文件的方式存放在目录下.平常自己电脑测试没问题 发到客户那里总会有各种乱七八糟的状况 反映配置无法保存.先前早知道win7有管理员权限的机制,然后还刻 ...

  2. JMeter + ant + Jenkins 接口测试持续集成

    JMeter + ant + Jenkins 接口测试持续集成 操作系统:linux 环境变量 地址 jdk11 https://www.oracle.com/java/technologies/do ...

  3. 并发编程 - 线程同步(五)之原子操作Interlocked详解二

    上一章我们学习了原子操作Interlocked类的几个常用方法,今天我们将继续学习该类的其他方法. 01.Exchange方法 该方法用于原子的将变量的值设置为新值,并返回变量的原始值.该方法共有14 ...

  4. CAD内核的奥秘 | 工业软件发展史 (转)

    CAD内核的奥秘 | 工业软件发展史 (声明:此文非本人原著,仅供交流,如果侵犯到原作者权利,立即删除) 如果一个产业要寻根,就会发现一个万千世界,最后会聚焦到一个点上. "一沙一世界&qu ...

  5. DataX - [02] 安装部署

    操作系统:Alibaba Cloud Linux release 3 (Soaring Falcon) Java:1.8.0_372 Python:3.6.8 => 2.7.1 一.安装部署 ( ...

  6. [第一章]ABAQUS CM插件中文手册

    ABAQUS Composite Modeler User Manual(zh-CN) Dassault Systèmes, 2018 注: 源文档的交叉引用链接,本文无效 有些语句英文表达更易理解, ...

  7. 【P3】Logisim搭建单周期MIPS-CPU

    最近在想,我究竟能从计组课程中学到什么.依葫芦画瓢地搭一个CPU不难,但稍微设想一下从无到有设计指令,构建数据通路控制器,再到优化为多周期.流水线,在权衡中各模块互相调节...整个过程复杂困难曲折到令 ...

  8. mysql -- 自定义函数及循环结构

    和存储过程类似,区别在于存储过程可以有0个或多个返回,但是函数只能有唯一一个返回值 一般而言,存储过程适合批量插入,批量删除,增删改:函数则用于处理数据,查询某个值. 创建 create functi ...

  9. 依赖注入(DI)与控制反转(IoC)

    .wj_nav { display: inline-block; width: 100%; margin-bottom: 0.375rem } .wj_nav span { display: inli ...

  10. Ubuntu Nvidia driver驱动安装(新)

    前言 英伟达更新了安装驱动的方式,更新一下文档 旧文:Ubuntu Nvidia driver驱动安装及卸载 下载官方驱动安装 1.安装驱动前一定要更新软件列表和安装必要软件.依赖(必须) sudo ...