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 ...
随机推荐
- Python更换下载源:提升包安装速度的实用指南
Python更换下载源:提升包安装速度的实用指南 Python作为一门广泛使用的编程语言,其强大的生态系统和丰富的第三方库是吸引众多开发者的关键因素之一.然而,在使用pip安装这些第三方库时,由于网络 ...
- 6.App.vue配置
1.修改<div id="app">指定动态路由,可以设置导航栏 <div id="app"> <!-- 导航栏 --> & ...
- 小程序开发实战案例五 | 小程序如何嵌入H5页面
在接入小程序过程中会遇到需要将 H5 页面集成到小程序中情况,今天我们就来聊一聊怎么把 H5 页面塞到小程序中. 本篇文章将会从下面这几个方面来介绍: 小程序承载页面的前期准备 小程序如何承载 H5 ...
- Java 加密和解密
在 Java 中,加密和解密通常通过 Java Cryptography Architecture (JCA) 和 Java Cryptography Extension (JCE) 实现.以下是常见 ...
- Deepseek学习随笔(11)--- 普通人如何抓住DeepSeek红利(附网盘链接)
一.文档简介 这个文档是清华大学新闻与传播学院新媒体研究中心发布的<普通人如何抓住DeepSeek红利>,该文件详细介绍了DeepSeek的功能.应用场景.使用技巧以及如何通过提示词驱动提 ...
- 常见的各类LLM基座模型(GPT、DeepSeek、Qwen等)模型解析以及对比
From: https://www.big-yellow-j.top/posts/2025/02/15/LLM.html 各类LLM模型技术汇总 只去对比整体框架,对所采用的激活函数,归一化处理,位置 ...
- STM32实战——ESP8266 WIFI模块
ESP8266 硬件介绍 ESP8266系列模组有哪些: 在本实验中,ESP8266与ESP-01不做区分. ESP-01引脚介绍: 引脚 功能 3.3 3.3V供电,避免使用5V供电 RX UART ...
- Pycharm pull 报错“Pull Failed: refusing to merge unrelated histories”
分析: 在github已将建立仓库 pycharm clone到本地 pycharm pull 在第3步报错 "Pull Failed: refusing to merge unrelate ...
- AWVS安装使用
AWVS安装使用 1.双击exe文件,然后点击下一步. 2.选择我接受,然后下一步. 3.选择路径(我选择的默认路径)然后下一步. 4.还是下一步. 5.设置邮箱,用户名密码,用户名12345678@ ...
- RedisTemplate实现setnx分布式锁
redis工具类 `package com.ttsx.activity.item.services.utils; import lombok.extern.slf4j.Slf4j; import or ...