【React】React.Children.only expected to receive a single React element child

最新推荐文章于 2025-07-07 08:35:13 发布

原创最新推荐文章于 2025-07-07 08:35:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #React.Children

前端专栏收录该内容

8 篇文章

订阅专栏

在使用AntDesign的Dropdown组件时，由于要求overlay属性只能接收一个React元素孩子，错误地提供了多个元素导致报错。解决方法是将多个组件包裹在同一div或React.Fragment内，确保Dropdown只接收一个单一的父元素。

React使用Ant Design项目报错：

Uncaught Error: React.Children.only expected to receive a single React element child

原因

<Dropdown overlay={menu}>
    <EditDrawer .../>
    <CreateDrawer .../>
</Dropdown>

</Dropdown>标签中必须且只能有一个元素，为空或有多个都会报错

解决：

<Dropdown overlay={menu}>
   <div>
    <EditDrawer .../>
    <CreateDrawer .../>
   </div>
</Dropdown>


//或者使用React中的空标签
<Dropdown overlay={menu}>
   <>
    <EditDrawer .../>
    <CreateDrawer .../>
   </>
</Dropdown>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

思维的深度

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react - Ant Design Pro 报错Warning: React.createElement: type is invalid – expected a string (for buil

高级前端工程师

02-01

2987

react，ant design pro，react报错React.createElement，报错怎么办，详细解决办法，如何解决浏览器控制台报错，如何解决ant组件库报错，使用ant design pro创建组件时报错Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a

前端高薪进击手记

03-09

1050

意思是说：v5版本的 react-router-config 包中的所有方法都已经被迁移到了react-router 版本的core核心代码中. 如果你偏向于或者需要把路由定义成JavaScript对象而不是react组件的话，那么你会爱上这种方式，也就是使用useRoutes 方法。这个错误提示是我在配配react的SSR中为了支持路由而报的错误提示。这个错误提示有点奇怪，不是完全的Error提示，而是Warning。万万没想到，搞了我懵逼一天的竟然是一个版本问题。

参与评论您还未登录，请先登录后发表或查看评论

react使用antd中的＜Dropdown/＞组件报错：`React.Children.only expected to receive a single React element child.`

vivisol的博客

01-22

3485

react使用antd的报错：`React.Children.only expected to receive a single React element child.`

Error: React.Children.only expected to receive a single React element child.

chen的博客

06-13

1950

是一个用于获取一个组件的所有子元素中的首个元素的函数，并且它会抛出错误，如果传入的不是单一的子元素。函数时，传入了多个子元素或者没有传入任何子元素，而这个函数只期望接收一个单一的 React 元素作为子节点。的地方，并确保父组件只传递一个子元素。如果需要传递多个子元素，可以使用。如果你的组件应该只接收一个子元素，但实际接收了多个或没有，那么。你应该修改父组件，只传递一个子元素给。中使用不同的逻辑来处理多个子元素。要解决这个问题，你应该检查使用。或其他相关函数来处理它们。简单而言：注意你是不是加了。

antd Dropdown组件使用时报错：React.Children.only expected to receive a single React element child

从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

02-20

763

当我在项目里使用 antd的Dropdown组件时出现的问题，我使用官网的例子，页面可以正常渲染，但当我鼠标放到Dropdown 上就页面崩溃，报了这个错。这个错的意思是Children.only只期望接收一个React元素子元素，从开发者工具看是 antd内部的错误。我的版本是 4.10.0，应该用下面这种写法！

React.Children.only expected to receive a single React element child.【react-transition-group】

m0_58981357的博客

12-20

939

【react-transition-group】Uncaught Error: React.Children.only expected to receive a single React element child.

t.js:1229 Uncaught Error: React.Children.only expected to receive a single React element child. at Object.onlyChild [as only] (react.development.js:1229:1) at renderOverlay (dropdown.js:138:1) at Overlay.js:10:1 at mountMemo (react-dom.development.js:17225:1) at Object.useMemo (react-dom.development.js:17670:1) at useMemo (react.development.js:1650:1) at Overlay.js:7:1 at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-do

05-28

<a className="ant-dropdown-link" onClick={e => e.preventDefault()}> Hover me </a> ``` 这里的 menu 变量是一个包含多个 MenuItem 的 Menu 组件。注意，Menu 组件必须作为 Dropdown 组件的 overlay 属性...

【React】报错：react.development.js:315 Warning: React.createElement: type is invalid。。。

all_might1的博客

03-10

2215

目录一、问题描述二、问题原因分析三、问题解决四、总结一、问题描述今天写新需求的时候，老js文件中动辄几千行，前人把好多东西都揉在一起。想着新功能就写在新的js文件中好了。于是引用了新的js文件，可是报出了如下错误二、问题原因分析隐约知道应该是引入方面或者是导出方面的问题，但是也没有准确定位到在哪里有问题最后在网上检索了下相关问题，好像也不是很沾边于是又看了看代码，很明显发现ctrl点击的时候不跳转，鼠标悬浮其上出现的信息有问题。那就一定是引..

React 源码系列 | React Children 详解 | Children 中 key 内部生成原理

止水聊技术

08-10

924

本文基于 React V16.8.6，本文代码地址测试代码 https://github.com/lxfriday/react-source-analyse/commit...

【React】React.Children.only expected to receive a single React element child报错

Just do IT！的博客

04-07

4824

原因：Ant Design中组件内部最外层只能接受一个元素，内部用div包裹即可解决办法：

Error: React.Children.only expected to receive a single React element child

qq_40896095的博客

08-19

1094

出现这样的问题是千奇百怪的，可能是你在render函数中return的标签中的注释有问题，也可能是你在利用引入动态变量的时候方式不对本文连接：点击博主个人小博客：嘿嘿

React.Children.only expected to receive a single React element child

qq_38719039的博客

03-04

1106

http://blog.csdn.net/meiyulong518/article/details/70748903ReactNative使用TabBar报错react.children.only expected to receive a single react element child实例代码： <TabBarIOS.Item title="首页" ...

React报错Error: React.Children.only expected to receive a single React element child.

all_might1的博客

08-05

1700

在用react-transition-group的时候报错Error: React.Children.only expected to receive a single React element child. 在网上找的时候看到有很多是因为注释的问题，于是将注释全都删除，还是进行报错之后就各种找错，有的没的改了一推最后发现是因为in、timeout的属性没有写在<CSSTransition>里，我都服了我自己了最玄幻的是，编译竟然每次都是成功的，我就说为什么这些属..

next Error: React.Children.only expected to receive a single React element child

qq_36990322的博客

12-13

398

next中的报错如下图原因很常见的报错，next的组件下只能存在一个元素，以Link为例： case本身是一个jsx元素，span也是一个jsx元素，所以报错 ... <Link > case <span>1</span> </Link> ... 解决办法使其变成一个整体jsx元素就行了，无论你用啥包裹，空元素或者其他标签都行 ... <Link > <> case <span>1</span&gt

React.js 错误解析：React.Children.only 预期仅接收单个 React 元素子节点